JQuery draggable within an overflow: auto div is confined within the div

I have a draggable UL with a set height/width. This draggable list can be dragged to a sortable list.

My code:

$(".serviceMembersAvailable li").draggable({
    helper: 'clone',
    connectToSortable: '.serviceMembersAssigned'
});
$(".serviceMembersAssigned").sortable({
    connectWith: '.serviceMembersAssigned',
    placeholder: 'servicePlaceHolder',
    update: function(event, ui) {
        Services.memberAssigned($(ui.item));
    }
});

My CSS:

ul.serviceMembersAvailable {
    height: 160px;
    overflow: auto;
}

It worked fine until I gave the draggable list a scroll by setting "overflow: auto" in the CSS. When I drag a LI, it is contained within the overflow so I can't actually move it to the sortable.

I found the following answer but it is for dragging a draggable item into a droppable item... But I want to drag a draggable item into a sortable. I think that's why their fix didn't work for me.

jquery ui draggable elements not 'draggable' outside of scrolling div

I got the appendTo part working from the above link but it wouldn't drop into the sortable.

Any ideas how I can get 开发者_如何学JAVAthis working?

Just use appendTo method of draggable as below :

$( ".selector" ).draggable({ appendTo: "body" });

this will add your div into body of page and then it is not remain in your draggable parent area. And Easily move anywhere on your page.

or use helper method of draggable as below :

$( ".selector" ).draggable({ helper: "clone" });

Visit the page for more

When the draggable item is clicked, try removing the overflow css attribute. Then, when the mouse button is released and/or the drag has completed restore the attribute. You should be able to hook a drag start and drag end event: http://docs.jquery.com/UI/Draggable#events