How to make a draggable across divs

Question

How do I make elements draggable between two divs? This seems to be something that draggables should do. But I haven't been able with the code I have. In this jsfiddle I have two divs with draggable elements. I want to get one element to go from the first div to the second div. That functionality must exist on many web sites.

Here is the jsfiddle with the code.

http://jsfiddle.net/gkvgn/9/

I have asked before and thought that someone would know how to have that functionality. If the code I have isn't the right way, how do I define an element and the draggable containment option to be able to have that functionality.

Answer 1

There's a similar Stack Overflow question that was answered here: jquery ui draggable elements not 'draggable' outside of scrolling div

I implemented the above solution on my own project and it worked beautifully.

I agree that it does seem like if you set the containment to window or document, cross-div dragging should be allowed. I imagine that you'd prefer overflow to stay hidden due to the amount of content you want to keep in your divs.

Answer 2

I could drag draggables from a scrollable div into a different non-parent when I stopped trying to use jquery. I ended up using https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations

Answer 3

Finally found the problem. Specifying overflow: hidden; for the container div restricts the draggable area to the container only. If I remove that specification from the styles. The elements are draggable across the divs. Here is the fiddle with the fix.

http://jsfiddle.net/gkvgn/10/