Question

I don’t normally make this sort of question / answer, but figured I’d do so, since I’ve seen this question asked 20+ times, and not a single answer actually works. In short, the problem is that if you have scrollable content (overflow: auto; anywhere inside of a draggable jQuery item, when you click and drag the scrollbar’s the parent draggable container drags along with it. So, I spent some time working up a solution.

Here’s an example of some html that would present this problem:

<div class="draggable" style="width:100px;height:100px;">
  <div id="content" style="width:80px;height:80px;overflow:auto;">
    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  </div>
</div>

The typical way you initialize an element to be draggable, is something like this:

$(".draggable").draggable()

Answer 1

The solution is to bind to the scroll event on the elements your initializing, and any of that elements children. Then, when any of the children invoke a scroll command, find all of the draggable parents of that element, and set a scrolled data element on that element.

Under jQuery UI’s current version (1.8.16), the start event always kicks off when you mouseup on the scrollbar, and progates up the tree, so this solution works pretty well in my testing.

$(".draggable").draggable({
    start: function() {
        // if we're scrolling, don't start and cancel drag
        if ($(this).data("scrolled")) {
            $(this).data("scrolled", false).trigger("mouseup");
            return false;
        }
    }
}).find("*").andSelf().scroll(function() {               
    // bind to the scroll event on current elements, and all children.
    //  we have to bind to all of them, because scroll doesn't propagate.

    //set a scrolled data variable for any parents that are draggable, so they don't drag on scroll.
    $(this).parents(".ui-draggable").data("scrolled", true);

});

For your viewing / dabbling pleasures, I’ve included a jsfiddle of the issue as well.