Search code examples
jqueryhtmlscrollbardraggable

how to disable draggable div when scroll bar is focused on in jQuery


I have a jQuery draggable container div with a side scroll bar that should not be draggable when I am scrolling up and down. .infotext is the inner div that has the text, contained within #infobody which is set to overflow:auto. I need a way to negate the draggable function on the div when the scrollbar is selected. 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;
}

Solution

  • A workaround to this problem (because for some reason no one is answering my questions as of recently) was to substitute the default browser scrollbar with a jQuery scrollbar known as jScrollPane. Doing this allows me to use the inserted scrollbar ID as a selector to disable draggable...like so:

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