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

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 elem开发者_StackOverflow社区ent (lika a cut n paste thing). How can I override this?

Found a simple solution accidentally (not involving css background). Just add draggable="false" attribute to your image. This will disable dragging 'feature' :)

<img draggable="false" src="http://www.google.com/intl/en_com/images/srpr/logo1w.png"/>

Can be set from javascript also, img.draggable = "false";

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

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.

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