Jquery Draggable UI覆盖了可拖动的Div中的HTML元素的普通浏览器行为

Question

我有一个jQuery UI可拖动的div，并且由于可拖动，HTML内容不能正常运行。

<div id="popup"> <!-- this popup is draggable --> 
    This text is not selectable. When I try to select it, the popup div is dragged. 
    <div style="overflow:auto; height:50px"> 
     Lots of text here, vertical scrollbar appears. But clicking the scrollbars don't work (doesn't scroll the content). Each click (mousedown-mouseup) is considered "dragging". 
    </div> 
</div> 

如何防止可拖动的UI覆盖HTML元素的正常浏览器行为？

Answer 1

您可以禁止像这样从内部<div>拖动：

$("#popup div").bind('mousedown mouseup', function(e) { 
    e.stopPropagation(); 
}); 

event.stopPrpagation()停止点击该内部<div>从bubbling up到外部<div>，其中拖动事件绑定到它。由于事件永远不会到达那里，这些拖动事件处理程序不会干涉。您可以在创建可拖动之前或之后运行此代码，它将以任何方式工作。

Answer 2

尝试添加您的div不可选择属性= OFF：

<div id="popup" unselectable="off"> 
... 

和css：

[unselectable=off] { 
    -moz-user-select     : all; 
    -khtml-user-select     : all; 
    user-select      : all; 
} 

我不是在jQuerry.UI测试，但是这是我的ExtJS和Dojo的解决方法。 ..