如何检测项目已被丢弃在同一个可排序列表中

Question

我有两个连接的可排序列表。当我将一个元素从左侧列表拖动到右侧一个元素时，我的代码工作正常，但是如果我想知道左侧列表中项目的顺序，您能告诉我应该查找什么事件吗？当一个项目被拖放到同一个列表中时（基本上重新排序同一个列表中的项目，而不是拖放到另一个列表而是相同）。

谢谢你。

编辑：

这是代码的链接：http : //jsfiddle.net/Hitman666/WEa3g/1/

因此，正如您将看到的，当项目被拖放到相反的列表中时，我会收到一个警报，但我还需要一个事件来处理列表（例如绿色列表）何时重新排序。然后我需要提醒订单，例如：4,3,2,1

HTML：

<ul id="sortable1" class="connectedSortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li>Item 5</li>    
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>    
</ul>

CSS：

#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

#sortable1 li{background: green;}
#sortable2 li{background: yellow;}

Javascript：

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        receive: myFunc
    }).disableSelection();

    function myFunc(event, ui) {
        alert(ui.item.html());
    }
});

Answer 1

您需要使用更新事件。这是我的示例（请注意，我进行了 2 个额外的函数调用来进行排序，因为您只需要左侧列表中的 evt）：

$(function(){
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable",
        update: myFunc
    });

    $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",  // deactivate:myFunc
    });

    function myFunc(event, ui){
        var b = $("#sortable1 li"); // array of sorted elems
        for (var i = 0, a = ""; i < b.length; i++)
        {
            var j=i+1; // an increasing num.
            a = a + j + ") " + $(b[i]).html() + '\n ' //putting together the items in order
        }
        alert(a)                 
    }
});

希望这可以帮助。