Unable to drag using image within anchor link in Chrome or IE

Question

This is going to be fairly hard to explain, so I've put together a JsFiddle to help demonstrate. http://jsfiddle.net/j5TKr/

I've tried to include everything that I require without complicating it too much. The overall aim is to have a list of li's which can be selected (single click, ctrl-click, shift-click) or double-clicked to be opened. The selected li's can be dragged around (so that they can be moved into other folders). The JsFiddle doesn't have the li's being grouped together correctly, but I'm not worried about that as it is actually working correctly.

The problem that I have is that in Google Chrome and IE (and possibly other browsers - not Firefox) you can't drag the li's around using the image within the anchor. Or more specifically, in Chrome it doesn't drag until you release the mouse button. If I remove the image (the "This one works" text link) it works. If you drag using the image information below the actual anchor, it works as well.

I gather it's a problem to do with me wanting to be able to click and select li's without actually opening the links.

Sorry if this is all a bit confusing. I'll answer any questions that come up.

Answer 1

Here’s an HTML workaround effective in IE and Google Chrome.

Instead of marking your draggable elements up like so:

<div class="icon">
  <a title="assets" href="[link]">
    <img src="[image]" />
  </a>
</div>

Mark them up like so:

<div
  class="icon"
  style="width: 90px; height: 90px; background: url('[image]')">
</div>

(You could, of course, separate the added CSS from the HTML.)