jQuery Draggable and overflow issue

jquery-ui drag-and-drop
Phill Duffy picture Phill Duffy · May 1, 2009 · Viewed 77.8k times · Source

I am having an undesired effect when I drag a div from a container div which is set as overflow: scroll.

I have found an example of someone else where they have had the issue but I have been unable to find a resolution

Example on Paste bin

What happens is that the scroll is just increased, I can see why this would be the desired behaviour if you wanted to drag to a destination within the scrollable div but I want to be able to take it outside of its scrolling grasp.

Answer

marks_ picture marks_ · Dec 29, 2010

I had a similar problem enabling a drag between two overflow-auto divs. With the help of the previous answers, I found that this combination works for me (Safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7):

appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'

Related questions

How to get the position of a draggable object

I'm trying to get the x and y of the draggable object using jQuery. The scenario is, I'm dragging and dropping an object onto another object and want to get the position of the drag & drop object. Edit: Now …

Read More
jquery ui get id of droppable element, when dropped an item

How we get the id of droppable element, when dropped an item? Here i use jquery ui and asp.net mvc. <table id="droppable"> <tr> <td style="width:300px;height:50px">Backlog</td&…

Read More
How do I highlight a droppable area on hover using jquery ui draggable

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it …

Read More