如何检测该项目已被放入同一可排序列表中

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)                 
    }
});

希望这会有所帮助。

Answer 2

使用此拖放js来执行此操作以及

http://www. redips.net/javascript/drag-and-drop-table-content/

它有很多事件，您可以在其上编写 js 代码或使用 ajax 调用服务器端代码

。

REDIPS.drag.myhandler_clicked = function () { }
REDIPS.drag.myhandler_moved = function () { document.getElementById('message').innerHTML = 'Element is moved' }
REDIPS.drag.myhandler_notmoved = function () { document.getElementById('message').innerHTML = 'Element is not moved' }
REDIPS.drag.myhandler_dropped = function () { document.getElementById('message').innerHTML = 'Element is dropped' }