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的解決方法。 ..