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

7

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>

answered Feb 21, 2010 at 20:03

Ben Shelock

21.1k26 gold badges98 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

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

answered Mar 25, 2011 at 14:51

brian

211 bronze badge

Collectives™ on Stack Overflow

JQuery drag/scrolling/overflow issue

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related