如何在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

回答

相關問題