当jQuery中的滚动条被关注时,如何禁用draggable div

例如:

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

对于js:

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

这对我很有用,我使用jqueryui1.8.2。

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

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

我想这也许行得通

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

overflow:hidden; 在页面包装器的css中。

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

• 可拖动元素的所有子元素
• 可拖动元素的所有可拖动父级

看看这个 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);
    }); });