jquery droppable based on condition

Below is my code.

$(document).ready(function(){
    $("#container li").draggable({ revert: 'invalid' });
    var total = 0;
    $("#selected ul").droppable({
        drop: function(e, ui) {
            $(ui.draggable).css({ top: 0, left:  0 }).appendTo(this);
        },
        accept: function() {
            return $("#selected li").length < 5;
        },
        placeholder: true
    });
    $("#container ul").droppable({
        drop: function(e, ui) {
            $(ui.draggable).css({ top: 0, left:  0 }).appendTo(this);
开发者_如何学运维        },
        placeholder: true
    });
});

It is something like we can drag and drop LI elements from container div to selected div and vice versa. Everything is working, but LI elements that are dragged and dropped are not being sorted. I mean, if I drop an LI element from container to selected, it is always moved to at the end of LI list. Same happens when I drop element from selected to container div.

So what should I do to make LI sortable?

Here is link: http://www.jsfiddle.net/nick_craver/HemSU/1/

Please need help to resolve this out. Thanks.

For what you're after (very different from the original question), .sortable() would be more appropriate, like this:

$(document).ready(function(){
    function checkMax() {
        var max = $("#selected li").length >= 5;
        $("#container ul").sortable("option", { 
            revert: max, connectWith: max ? '' : '#selected ul'
        });
    }
    $("#selected ul").sortable({
        connectWith: '#container ul',
        receive: checkMax
    }).disableSelection();
    $("#container ul").sortable({
        connectWith: '#selected ul',
        receive: checkMax
    }).disableSelection();
});

You can test it out here.

Well you append to the UL, that means it will end up last.

If you want to be able to insert it in a specific place in the list you should probably have the LIs as droppable, not the UL.

And then user insertbefore that LI instead of append to.