如何在jQuery中关注滚动条时禁用可拖动的div答案

【问题标题】：how to disable draggable div when scroll bar is focused on in jQuery如何在jQuery中关注滚动条时禁用可拖动的div
【发布时间】：2010-07-21 15:07:22
【问题描述】：

我有一个带有侧滚动条的 jQuery 可拖动容器 div，当我向上和向下滚动时，它不应该是可拖动的。 .infotext 是包含文本的内部 div，包含在 #infobody 中，设置为溢出：自动。 I need a way to negate the draggable function on the div when the scrollbar is selected.这是我的代码：

$(".lsidebar").draggable({"scroll":false});

 .lsidebar #infobody{
cursor:default;
position:absolute;
width:100%;
overflow:auto;
margin:23px 0 0 0;
z-index:14;
}

   #infobody .infotext{
cursor:default;
position:relative;
width:100%;
z-index:14;
color:#969696;
}

【问题讨论】：

标签： jquery html scrollbar draggable

【解决方案1】：

其实你可以在draggable中使用cancel属性来防止滚动事件影响到draggable元素。

例如：

如果你的html是这样的...

<div class="draggable">
    <div class="scrollable"></div>
</div>

对于js：

$('.draggable').draggable({
   cancel: '.scrollable'
});

当您在该特定区域滚动时，外部可拖动元素将暂时禁用。

【讨论】：

+1 - 大概当 OP 提出这个问题时这个功能不存在，但现在肯定是正确的答案。

【解决方案2】：

这对我有用，我使用的是 jquery ui 1.8.2。


      $(".drag").draggable({
                        start: function(e, ui) {
                        if ($(e.originalEvent.target).is(".scroll"))
                            e.preventDefault();
                        }
                    })

【讨论】：

【解决方案3】：

解决此问题的方法（因为最近由于某种原因没有人回答我的问题）是用称为 jScrollPane 的 jQuery 滚动条替换默认浏览器滚动条。这样做允许我使用插入的滚动条 ID 作为选择器来禁用可拖动...就像这样：

 $('.jScrollPaneDrag').live('mousedown mouseup', function(e){
     if(e.type=='mousedown'){
         $('.lsidebar').draggable({disable: true});
     }else{
         $('.lsidebar').draggable({"scroll":false});
     };
 });

【讨论】：

【解决方案4】：

我想这可能会很好

$("div")
.mouseenter(function(){...bind drag;})
.mouseleave(function(){...unbind drag;});

【讨论】：

【解决方案5】：

尝试在page_wrapper的css中添加overflow:hidden;。

【讨论】：

【解决方案6】：

你可以绑定到当前元素及其所有子元素和父元素上的滚动事件，如下所示，滚动时拖动将被禁用：

当前可拖动元素
可拖动元素的所有子元素
可拖动元素的所有可拖动父级

检查此JSFIDDLE。

$(function () {
    $(".draggable").draggable({
        start: function () {
            // cancel draggin while scrolling
            if ($(this).data("scrolled")) {
                $(this).data("scrolled", false).trigger("mouseup");
                return false;
            }
        }
    }).find("*").andSelf().scroll(function () {
        // Bind to the scroll event on current element, and all its children.

        // Prevent all draggable parents from dragging while they are scrolling
        $(this).parents(".ui-draggable").data("scrolled", true);
    }); });

【讨论】：