jquery - 滚动可拖动项目的内容时禁用 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 具有溢出，而不是 content div。对于解决方案来说，这并不重要，但我不想添加额外的 div 级别，因为这并不是绝对必要的。

这是jsfiddle .

[1] - listen for mouse events … except a div's overflow:scroll scrollbar?