在div内拖动 - Firefox问题 [英] Dragging inside div - Firefox issue

问题描述

问候，

我遇到了一个简单的jQuery mousemove函数的问题：

我点击并拖动一个div，有时候浏览器会试图拖动div，就像它是一个图像。这只在Firefox中显示（测试版本为4.0），并对我的项目造成严重破坏。

我把它解释为这个测试用例：

 < style type =text / cssmedia =screen> 
 .box {width：100px; height：100px; margin：10px; } 
 .red {background-color：red; } 
。黄色{background-color：yellow; } 
 .green {background-color：green; } 
 .hidden {display：none; } 
< / style> 
 
< div class =box red>< / div> 
< div class =box yellow>无法拖曳我< / div> 
< div class =box green>< div class =hidden>不能拖动我< / div>< / div> 
  

重现：在div上点击一次以选中它，然后单击并拖动。

• 红色方块可以被拖动


• 黄色方块不能被拖动


• 绿色box可以被拖动

所以这个问题似乎只在div被清空或其内容被隐藏时出现。 b
$ b

任何人都可以向我解释为什么会发生这种情况吗？
防止这种拖拽行为的最佳方法是什么？现在我知道我可以在容器中添加一个空的div，但是我想知道是否有更优雅的方法。

谢谢

解决方案

我无法在Firefox 4中重现此问题 a>，但是如果 发生在你身上，这应该会阻止它......

  $ （'div'）。bind（'dragstart'，function（event）{
 event.preventDefault（）
}）; 
  

jsFiddle 。

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 reproduce: 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.

这篇关于在div内拖动 - Firefox问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！