JQuery drag/scrolling/overflow issue

Question

I have a scrolling:auto problem with JQuery 1.4.2 and JQuery 1.7.2. I have a container DIV with 2 DIVs inside it. Like this:

<div id="dragContain">

<div id="dragMe">
  <div>Title goes here!</div>
  <div style="scrolling:auto;">Content goes here!</div>
</div>

</div>

And I enable dragging the group by:

$('#dragMe').draggable({
  containment: '#dragContain', cursor: 'move', zIndex: 20000
});

And, when I do so, in FF the scrolling only works with the mouse wheel. Grabbing the scrollbar causes a drag event and moves the group. It works fine in IE.

Is there any way to correct this? Can I make only the titlebar a grab handle which causes a drag on the parent div?

Thanks!

Answer 1

You could try using a handle instead. So the user would drag and drop the h2 element instead of the whole of #dragMe.

$('#dragMe').draggable({
  containment: '#dragContain', cursor: 'move', zIndex: 20000, handle: 'h2'
});

.

<div id="dragContain">

<div id="dragMe">
  <h2>Title goes here!</h2>
  <div style="scrolling:auto;">Content goes here!</div>
</div>

</div>

Answer 2

Or use CANCEL on the selector with the scrollbars to prevent the dragging from occurring on that object.

Example: http://jqueryui.com/demos/draggable/handle.html