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

我有一个jQuery可拖动容器div，当滚动上下滚动时，该滚动条不应该可拖动。 .infotext是具有文本的内部div，包含在设置为溢出的#infobody中：auto。当滚动条被选中时，我需要一种方法来否定div上的可拖动函数。这里是我的代码：如何在jQuery中关注滚动条时禁用可拖动div 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; 
}

来源

2010-07-21 sadmicrowave

一种解决这个问题（因为某种原因，没有人回答我的问题是最近）与被称为JScrollPane的一个jQuery滚动条来替代默认的浏览器滚动条。这样做可以让我使用插入的滚动条ID作为选择禁用拖动......像这样：

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

来源

2010-07-27 16:40:09 sadmicrowave

这个工作对我来说，使用jQuery UI的1.8.2 IM。


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

来源

2010-11-03 13:28:45 mike

我想这可能会工作得很好

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

来源

2010-11-03 14:16:16 Bonshington

其实你可以使用拖动“取消”属性，以防止滚动事件影响到拖动元素。

例如：

如果您的HTML是这个样子......

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

为JS：

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

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

来源

2011-11-21 20:11:05 Nightspirit

+1 - 大概这个功能在OP问这个问题时并不存在，但现在绝对是正确的答案。 – 2013-03-10 00:41:02

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

来源

2014-05-30 09:59:58 isxaker

您可以绑定到滚动事件当前元素及其所有的孩子和家长按以下步骤进行，拖动将滚动时就被禁用：

当前拖动元素
所有的孩子可拖动元素

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

来源

2015-07-31 14:41:34 Stacked

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

回答

相关问题