让jQuery排序 - 排名问题

Question

我已经使jQuery可排序和droppable一起工作。但是我几乎已经这样做了。排序只有一个问题。

问题：
当我在RHS（右手边）中拖放2个项目时，我将第二个项目排在第二个项目之下，而不是秒项目的位置转移到上面一步。例如，如果我有2项没有。位置第2和第4，当我将第2个定位项目排序到4以下时，第4个项目转移到第3个位置，这是我不想要的。 我尽力修复它，但我无法解决，我最终知道这是一个我不想要的默认功能。

我希望当我对一个项目的位置进行排序时，不会向上移动一步。

运行代码： http://jsfiddle.net/gbg8R/

<script>
$(function () {
    // create unique IDs
    function rankOrder(){
    var index = 1;
    $(".rank-order-controller").each(function () {
        var itemID = $(this).attr("id", "rank-order-" + index++);
        var getID = "#" + $(this).attr("id");

        var minRankSelection = $(getID+" .minRankSelectionInput").val(); // need to call dynamic input value from the planner side option "Rank how many choices?"
        var allChoices = $(getID+ " .drag-container ul.items li").length;

        // if rank number is not defined
        if (minRankSelection == ''){
            minRankSelection = allChoices;
        }

        // create dynamic dom element for rank items
        for (var i=1; i <= minRankSelection; i++){
        $("<li>" + i +"</li>").appendTo($(getID+" .sort-container ul.rank"));
        $("<li><div class='item disable'>DRAG CHOICES HERE</div><input type='text' value='' class='value' style='display:none' /><span class='delete'></span> <span class='move-cursor'></span></li>").appendTo($(getID+" .sort-container ul.items"));
        }

        //set default height of left column
        var itemHeight =  $(getID+" .drag-container ul").height($(getID+" .sort-container ul").height()-2); // $(getID+" .drag-container").height($(getID+" .sort-container ul").height()-2);
        // var itemHeight =  $(getID+" .drag-container").height($(getID+" .sort-container ul").height()-2);  $(getID+" .drag-container ul").height($(getID+" .drag-container ul").height()-2); 

        // if rank number of item is equal to rank number of choices
        if(allChoices == minRankSelection){
            $(getID+ " .drag-container").css("overflow-y","visible");
        }else{
            $(getID+ " .drag-container").css("overflow-y","scroll");
        }

        //invoke all functions
        BindDraggable(getID, "ul.items li");
        BindDroppableSortable(getID, ".sort-container ul.items li");
        BindDroppable(getID, ".drag-container ul.items");
        deleteItems(getID, ".sort-container ul.items");
    });
    }
    rankOrder();

    // make items draggable
    function BindDraggable($ID, selector) {
        $(selector, $ID).each(function () {
            var CurrentSelector = $(this);
            CurrentSelector.find("div:not(.disable)").draggable({
                    helper: "clone",
                    revert: 'invalid',
                    handle: "div",
                    zIndex: 100,
                    disabled: false,
                    containment: $ID,
                    start: function (event, ui) {
                        $(this).addClass("hidden");
                        CurrentSelector.find("span").addClass("hidden");
                    },
                    stop: function () {
                        $(this).removeClass("hidden");
                        CurrentSelector.find("span").removeClass("hidden");
                    }
                });
        });
    }

    // make right col items droppable and bind with sortable
    function BindDroppableSortable($ID, selector) {
        $(selector, $ID).each(function () {
            var CurrentSelector = $(this);
            CurrentSelector.find("div").droppable({
                    activeClass: "ui-state-active",
                    hoverClass: "ui-state-hover",
                    accept: $ID + " .drag-container div",
                    drop: function (event, ui) {
                        var $this = $(this);
                        $this.droppable('disable').removeClass().addClass("item");
                        BindDraggable($ID, ".sort-container ul.items li"); // recall func
                        CurrentSelector.addClass("ui-state-default").find(".move-cursor").css('display', 'block');
                        $this.text(ui.draggable.text()); // update the text
                        var $deleteLI = $(ui.draggable).parent();
                        $this.html($(ui.draggable).remove().html());
                        $deleteLI.remove(); // remove Left Col <li>
                        $(selector, $ID).find("div").removeClass("ui-state-active");
                        var indexVal = CurrentSelector.index();
                        $(CurrentSelector).find("input.value").val(indexVal).attr("value", indexVal + $this.text());

                    }
                }).closest("ul.items").sortable({
                    //items:".ui-state-default",
                    cursor: "move",
                    handle: ".move-cursor",
                    revert: true,
                    containment: "parent",
                    //helper: "clone",
                    placeholder: "placeholder",
                    tolerance: "pointer",
                    stop: function(event, ui){

                        //var indexVal = ui.item.index();
                        $(ui.item).find("input.value").val(ui.item.index()).attr('value', ui.item.index() + ui.item.text());

                    }


                }).disableSelection();
        });
    }


    // make left col items droppable
    function BindDroppable($ID, selector) {
        $(selector, $ID).droppable({
                activeClass: "ui-state-active",
                hoverClass: "ui-state-hover",
                accept: $ID + " .sort-container div",
                drop: function (event, ui) {
                    var newItem = $('<li/>');
                    $('<div/>', {
                            "class":"item",
                            text: ui.draggable.text()
                        }).appendTo(newItem);
                    newItem.appendTo($(this));
                    BindDraggable($ID, ".drag-container li"); // recall func
                    $(ui.draggable).text("DRAG CHOICES HERE").removeClass("ui-state-active").addClass("disable").draggable("disable").droppable("enable");
                    $(ui.draggable).closest("li").removeAttr("class").find("span").css("display", "none")
                }
            })
    }

    // make right items deletable
    function deleteItems($ID, selector) {
        $(selector, $ID).on("mouseenter", ".ui-state-default", function (event) {
            var CurrentSelector = $(this);
            CurrentSelector.find("div").addClass("ui-state-active").end().find("span.delete").css('display', 'block').click(function (event) {
                if($(this).parent('li.ui-state-default').find("div").length == 0) return;
                var newItem = $('<li/>');
                $('<div/>', {
                        "class":"item",
                        text: CurrentSelector.find("div").text()
                    }).appendTo(newItem);
                newItem.appendTo($ID + " .drag-container ul.items"); // new items
                CurrentSelector.removeAttr("class").find("div").removeClass("ui-state-active").addClass("disable").text("DRAG CHOICES HERE").droppable("option","disabled", false).draggable("disable");
                CurrentSelector.find("span").css('display', 'none');
                BindDraggable($ID, ".drag-container li"); // recall func
            });
        });
        $(selector, $ID).on("mouseleave", ".ui-state-default", function (event) {
            $(this).find("div").removeClass("ui-state-active").end().find("span.delete").css('display', 'none');
        });
    }
}); // anonymous function end       


</script>