Dragging inside div - Firefox issue

Greetings,

I've run into a problem with a simple jQuery mousemove function:

When I click and drag inside a div, sometimes the browser will attempt to "drag" the div like it is an image. This only exhibits in Firefox (tested version 4.0), and is causing havoc with my project.

I boiled it down to this test case:

<style type="text/css" media="screen">
.box { width: 100px; height: 100px; margin: 10px; }
.red {background-color: red; }
.yellow {background-color: yellow; }
.green {background-color: green; }
.hidden { display: none; }
</style>

<div class="box red"></div>
<div class="box yellow">Can't Drag Me</div>
<div class="box green"><div class="hidden">Can't Drag Me</div></div>

To rep开发者_如何学Pythonroduce: click once on a div to select it then click and drag.

• Red box can be dragged
• Yellow box cannot be dragged
• Green box can be dragged

So the problem only seems to exhibit when a div is empty or its contents are hidden.

Can anyone explain to my why this is happening? What would be the best approach to prevent this "dragging" behavior? Now I know I could add an empty div to the container but I wondered if there was a more elegant approach.

Thanks

I wasn't able to reproduce the issue in Firefox 4, but if it is happening for you, this should stop it...

$('div').bind('dragstart', function(event) {
    event.preventDefault()
});

jsFiddle.