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.
精彩评论