JQuery draggable element with image - problems dragging in IE and Chrome

Question

I have divs that are defined as draggables. The divs contains one image and some text each. Dragging works perfectly in Firefox and Opera, but in Chrome and IE I can only start the drag by mousedown on the text, not the image. When I mousedown on the image in IE and Chrome, the built in html element drag-drop browser function kicks in - trying to drag only the image element (lika a cut n paste thing). How can I override this?

Answer 1

Oh heck, I just put the image as a background-image on one of the div's inside the draggable element. Solved the problem, yay.

ITS ALL HACKS

Answer 2

you also could add style="block" to the image.

Answer 3

I recently had this problem also and I found that the solution lies in the specificity of your jQuery selector.

Assuming:

<div class="albumItem draggable">
  <img src="#" alt="#" />
</div>

Just doing this causes the issue in IE/Chrome:

$('.draggable').draggable();

Instead, be more specific:

$('.albumItem.draggable').draggable();

Not sure what is going on in IE/Chrome behind the scenes that is causing this issue, but more specific jQuery selectors did the trick for me.