Question

I have two connected sortables – one that is empty (top) at initialization and one that contains six elements (bottom). The intent is to drag one or more elements from the full sortable to the empty one to define your answer. When dragging the second+ element from the bottom to the top to the area below any existing items, the new item is placed just above the last item.

I’d like to have this new item be the last one in the list. Any thoughts?

Here’s an example version to demonstrate the behavior: http://maris.manattweb.com/test/sortableTest.asp

Here’s the jsFiddle: http://jsfiddle.net/manattweb/YbndA/20/

Answer 1

Here’s one thing you could do:

$("#sortable").sortable({
    placeholder: "ui-state-highlight",
    items: "li:not(.ui-state-disabled)",
    receive: function(event, ui) {
        ui.item.appendTo("#sortable");
    }
});

Move the item received to the very bottom of the ul.

Here’s a working example: http://jsfiddle.net/QNd6T/

I took the liberty of jquerifying some of your getElementById calls.