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!

Ben Shelock · Accepted Answer · 2010-02-21 20:03:59Z

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>

brian · Accepted Answer · 2011-03-25 14:51:01Z

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

Collectives™ on Stack Overflow

JQuery drag/scrolling/overflow issue

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related