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

Question

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.

http://stackoverflow.com/questions/2098387/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 this working?

Answer 1

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