Question

I have two lists of elements, and I have enabled jQuery UI sortable on both of them. I used the connectWith option to enable me to drag between the two lists.

One list has a lot of elements in it, so I added overflow-y: scroll to it. I used a custom helper function to allow me to scroll the entire page when dragging elements.

helper: function(event, element){
    // From: http://stackoverflow.com/a/8512783/206403
    return element.clone().appendTo('body');
}

If there are no elements in the top list, it’s really hard to drag an element into it. If there is already an element in the top list it works fine.

Here’s a demo: http://jsfiddle.net/MCcuc/5/. Scroll down, and try to move “Item Q” (from the bottom of the red list), to the green list (try to move the element over the green list, then back out again). You’ll see that it’s not very easy to get it to attach to the green list.

I think it has something do to with my helper function. How can I get it to let me drag the first element into the green list?

Answer 1

I am not sure that it helps but what I found is that the “real” problem starts earlier and not at the point when the placeholder disappears. What happens is that the inner scroll-bar doesn’t scroll, but in the background the position of your cursor still triggers reordering in the Inactive list. So visually your item is above the Active list, but its position is still above the first 2 elements of the Inactive list. However because of the visual “over” placement the placeholder is already in the Active list. So when the position leaves the “virtual position” of the first item of the Inactive list then the placeholder is removed. Unfortunately by this time it’s in the Active list not in the inactive list.

So what I meant by “the problem starts earlier” is that the placeholder should stay in the Inactive list and make it scroll up instead of being moved to the Active list too early, which is probably what you want: first use the scroll-bar of the list then use the scroll-bar of the body. But this implies the requirement of the moving helper item being the child element of the old list when it’s above it and become the child of the ‘body’ when it leaves the old list’s area.

I don’t think you can do that (with this plugin).

What might be possible: if you don’t want to rearrange within the Inactive list but only move items to the Active list with page scroll. In this case what you could do for example is to use the ‘out’ event and when it’s triggered scroll up the Inactive list. Unfortunately seems the ‘out’ event is not triggered the very first time when it should be.
Seems like a bug 🙁

...
appendTo: 'body',
helper: 'clone',
out: function() {$('#Inactive')[0].scrollTop = 0;},
...

Update: found a workaround. I am not polishing it (special case: when the placeholder is the first item in the list), but this is the idea:

appendTo: 'body',
helper: 'clone',
placeholder: 'addBox',
change: function() {
    $('.addBox').prev()[0].scrollIntoView();
}