滚动可拖动项目的内容时禁用 jQuery 拖动

Question

我通常不会提出此类问题/答案，但我想我会这样做，因为我已经看到这个问题被问了 20 多次，但没有一个答案真正有效。简而言之，问题是，如果您在可拖动 jQuery 项目内的任何位置有可滚动内容（overflow: auto;），则当您单击并拖动滚动条时，父可拖动容器也会随之拖动。因此，我花了一些时间来研究解决方案，

下面是一些可能会出现此问题的 html 示例：

<div class="draggable" style="width:100px;height:100px;">
  <div id="content" style="width:80px;height:80px;overflow:auto;">
    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  </div>
</div>

将元素初始化为可拖动的典型方法如下：

$(".draggable").draggable()

Answer 1

我建议基于 [1] 和 PriorityMark 提供的解决方案的组合的解决方案。这个解决方案工作更可靠，而且我认为它也更高效。

$(".draggable").draggable({
    start: function(event) {
        var content = $(this).children('.content');

        // if we're scrolling, don't start and cancel drag
        if (event.originalEvent.pageX-content.offset().left > content.innerWidth())
        {
            console.log('should-cancel');
            $(this).trigger("mouseup");
            return false;
        }
    }
});

为了实现这一点，我稍微调整了示例 DOM（但这不应该是一个大问题）：

<div class="draggable" style="width:100px;height:100px;overflow:auto;">
  <div class="content" style="width:80px;height:80px;">
    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  </div>
</div>​

请注意，这里的 draggable div 具有 overflow，而不是内容 div。对于解决方案来说，这并不重要，但我不想添加额外的 div 级别，因为这并不是严格必要的。

这是 jsfiddle。

[1] - 监听鼠标事件...除了 div 的溢出：滚动滚动条？

Answer 2

解决方案是绑定到您初始化的元素以及任何该元素子元素上的滚动事件。然后，当任何子元素调用滚动命令时，找到该元素的所有可拖动父元素，并在该元素上设置滚动数据元素。

在 jQuery UI 的当前版本 (1.8.16) 下，当您将鼠标放在滚动条上时，启动事件总是会启动，并沿树向上传播，因此该解决方案在我的测试中效果很好。

$(".draggable").draggable({
    start: function() {
        // if we're scrolling, don't start and cancel drag
        if ($(this).data("scrolled")) {
            $(this).data("scrolled", false).trigger("mouseup");
            return false;
        }
    }
}).find("*").andSelf().scroll(function() {               
    // bind to the scroll event on current elements, and all children.
    //  we have to bind to all of them, because scroll doesn't propagate.

    //set a scrolled data variable for any parents that are draggable, so they don't drag on scroll.
    $(this).parents(".ui-draggable").data("scrolled", true);

});

为了您的观看/涉猎乐趣，我还包含了该问题的jsfiddle。

Answer 3

我正在寻找这个问题并找到了一个更适合我的更小的解决方案，我想分享它。
我的解决方案是，停止在子/内容上传播“mousedown”事件。
没有鼠标按下意味着没有拖动；）

$(".draggable").draggable();
$("#content").mousedown(function(event) {
    event.stopPropagation();
});

Answer 4

这是一个很好的解决方案，但它有一个错误。
一旦设置为滚动，则需要第二次拖动才能真正拖动元素。