jQuery-UI Draggable and Sortable

Question

So I've been working with this example: http://jqueryui.com/demos/draggable/#sortable and I've accomplished it on my product. However I want to make two significant changes.

1. I don't want the second list(toList in my example) to be sortable on it's own. I only want it to accept items from the first list(fromList in my example).

2. When a user drags an item from the first list(fromList) and drops it into the second list(toList) I want that item to be forced to the bottom.

Suggestions? Here is a working fiddle of what I have so far. http://jsfiddle.net/CrtFD/

Answer 1

Try using a droppable for your toList:

EDIT: Per comments below:

http://jsfiddle.net/abzYK/

jQuery(document).ready(function(){
    jQuery("#fromList li").draggable('destroy').draggable({
        connectToSortable: "#toList",
        revert: "invalid",
        containment: '#equipCont',
        helper: function(e, ui) {
            return jQuery(this).clone().css('width', jQuery(this).width());
        }
    });
    jQuery("#toList").droppable('destroy').droppable({
        drop: function(e, ui) {
            var dragClone = jQuery(ui.draggable).clone();
            jQuery("#toList").append(dragClone);
        }
    });
    jQuery("ul, li").disableSelection();
});
​

Answer 2

You want your toList to be Droppable, not Sortable. This example seems to describe what you are trying to accomplish: http://jqueryui.com/demos/droppable/#shopping-cart