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

Question

我有一个带有侧滚动条的jQuery可拖动容器div,当我上下滚动时,它不应该是可拖动的..infotext是具有文本的内部div,包含在#infobody中,设置为overflow:auto.当选择滚动条时,我需要一种方法来否定div上的可拖动函数.这是我的代码:

$(".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;
}

Answer 1

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

例如:

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

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

对于js:

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

在该特定区域中滚动时,外部可拖动元素将被临时禁用.

Answer 2

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

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