How to disable draggable div when scrollbar is concentrated in jQuery

Question

I have a jQuery draggable container div with a side scrollbar that cannot be dragged when I scroll up and down..infotext is an inner div that has the text contained in #infobody that is set to overflow: auto. I need a way to nullify the drag and drop function on a div when selecting a scrollbar. Here is my code:

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

A workaround to this problem (because for some reason no one answers my questions recently) was to replace the default browser scrollbar with the jQuery scrollbar known as jScrollPane. This allows me to use the inserted scrollbar id as a selector to disable drag and drop ... for example:

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

Answer 2

In fact, you can use the cancel property in draggable to prevent the scroll effect on the drag element.

For instance:

if your html looks like this:

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

for js:

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

When scrolling in this specific area, the external drag and drop element will be temporarily disabled.

Answer 3

this works for me, im using jquery ui 1.8.2.

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

Answer 4

I think it might work fine

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

Answer 5

Try adding overflow:hidden; in css page_wrapper.

Answer 6

You can bind the scroll event to the current element and all its children and parents, as shown below, drag and drop will be disabled when scrolling:

• Current drag & drop item
• All children draggable item
• All draggable parents of the dragged item

check out 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); }); });