Question

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 parent div when the child 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;
}

Answer 1

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

});