Question

我有一个jquery ui draggable 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 unselectable attribute = off：

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

和css：

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

我没有在jQuerry.UI中测试过，但这是我在extJs和Dojo中的解决方法......

Jquery Draggable UI覆盖了draggable-enabled div中HTML元素的正常浏览器行为

2 个答案: