How can I drag from a connected vertical list to the first item of a another list below with jQueryUI Sortable?

I have have several ULs vertically down a page. They are setup using jQueryUI's sortable(). My live example is:

http://jsfiddle.net/GVqPF/2/

I can drag from answers to make it the final element in questions. But when I drag from questions to answers the placeholder jumps to the second item in the questions list. At that point I can then drag it to the top. But i can't drag directly to the first position in the Answers list.

Here is a video that demonstrate开发者_开发知识库s the problem.

Any ideas why I am having this issue dragging from a list above to the first element of a list below?

I've tried editing the padding and margin on both the lists and the sortable items.

Thanks, Denis

This is my observation and plausible explanation for this weird behavior.

When moving an element from questions container to answers container, the placeholder initially adds itself to the end of the answers container before further cursor movement gets it between answer1 and answer2.Ideally, this should not happen as the placeholder should jump before answer1 and then between answer1 and answer2.
*PS:*This effect may not be visible in the jsfiddle window but if you construct a fresh HTML page with the given code, you will see what I am saying.

Further investigation reveals that there is a bug in the sortable jquery UI plugin. Take the developers version of jquery.ui.sortable.js and find this phrase "var dist = 10000; var itemWithLeastDistance = null". The objective of this piece of code is to find out the nearest element when the cursor traverses from one container to another.

Observe the variable "cur" (I have added console.log() commands for firebug). The value of this variable is always 0 . Since the value of cur is always '0', the code thinks wrongly calculates that last <li> element as the 'itemWithLeastDistance' and wrongly jumps there.

//When entering a new container, we will find the item with the least distance and append our item near it 
                var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[innermostIndex].floating ? 'left' : 'top'];
                for (var j = this.items.length - 1; j >= 0; j--) {
                    if (!$.ui.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) continue;
                    var cur = this.items[j][this.containers[innermostIndex].floating ? 'left' : 'top'];
                    //my comments
                    console.log("cur : %s for iteration: %s has base %s", cur, j, base);
                    if (Math.abs(cur - base) < dist) {
                        dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
                        //my comments
                        console.debug(this.items[j]);
                    }
                }

Let me know what the community thinks. we can report this to jquery ui team.

When you drag an LI from one list to a connected list, the "empty space" in the old list disappears. This causes the lists below it to "move up" on the page, just as your cursor reaches the next list. This causes your dragged item to be hovering over the 2nd space instead of the 1st, forcing you to nudge your cursor up again to get the 1st space.

If your lists are next to each horizontally, you won't see this issue (but, of course, that doesn't help you).

I haven't come up with an actual solution yet, but hopefully this will help frame the problem.