javascript - 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>

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

Answer 1

您可以禁用从内部拖动 <div>像这样:

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

event.stopPrpagation() 停止点击那个内部 <div>来自 bubbling up到外面<div>绑定(bind)了拖动事件。由于事件永远不会到达那里，因此那些拖动事件处理程序不会干扰。您可以在创建可拖动对象之前或之后运行此代码，无论哪种方式都可以。