jQuery draggable scrollable container

Question

I currently have a simple draggable list, which I want to be inside a div ( the items ) and scrollable.

$( ".draggable" ).draggable();

I currently have this fiddle: http://jsfiddle.net/YvJhE/660/

But as you can see, the draggable elements stay inside the elements container, I want them to be able to drag out, but also the ability to scroll inside the elements container as soon as there are more elements, than the container long is.

Can anyone get me on the right track?

Answer 1

jQuery handles interactions like these with a helper object that you can append to another DOM element:

$( ".draggable" ).draggable({
    helper: 'clone',
    appendTo: '#outer'
});

Then you can have a droppable somewhere:

$('#dropspace').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        window.alert('Element dropped at left: ' + ui.position.left + '; top: ' + ui.position.top);
    }
});

Proof of concept: http://jsfiddle.net/YvJhE/662/

You still need to move the actual dom element to where it was dropped, or recreate it depending on what you're going to use it for.

Answer 2

The option helper: 'clone' makes a clone of the item you're dragging automatically so that it can be dragged out of the container:

jQuery(".draggable").draggable({
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body'
});