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

【问题标题】：How to detect the item has been dropped in the same sortable list如何检测项目已被丢弃在同一个可排序列表中
【发布时间】：2011-06-21 11:41:59
【问题描述】：

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

谢谢。

编辑：

这里是代码链接：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());
    }
});

【问题讨论】：

你能发布一些代码或链接吗？
@Alex：我已经用 jsfiddle 上的代码链接更新了我的帖子
我已将您链接的 jsfiddle 代码编辑到您的问题中。这总是一个好主意，因此在您的链接代码被删除后，您的问题仍然可能对社区有用。
@DarthJDG：好的，没问题，谢谢。

标签： jquery jquery-ui jquery-ui-sortable

【解决方案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)                 
    }
});

希望这会有所帮助。

【讨论】：

是的，但问题是我已经（在我的生产代码中）在左侧列表中有一个接收事件的函数。那么我将有两个事件，我希望以某种方式得到 arround.. 嗯，有什么想法吗？所以我确实需要接收事件来知道我从另一个连接列表中收到了一个项目，但是现在我需要一个事件，它只有在我从左侧列表中拾取一个元素并将其放在另一个地方的同一个列表中时才会触发。希望我说得通……
@Nikola：您仍然可以只使用更新事件并通过在上一个示例中的警报上方添加以下代码来查找 ui.sender 尝试，'if(ui.sender) { a =a+"\n"+"你从另一个列表中添加了'"+ui.item.html()+"'"}'
hmmm，在我看来我还有另一个问题：因为我有两个列表，第一个现在有一个更新事件，它检查 ui.sender 并因此表现为接收事件，我也有第二个列表中的接收事件，它会触发它接收到的第一个列表中的项目。我的问题仍然是这个：如果我将一个项目从它在第一个列表中的位置拖出并将其放在相同（第一个）列表中的某个其他位置 - 如何检测此事件？因为我在 if(ui.sender) 中不能有“else”语句，因为在 else 中我们可以有两种情况：刚刚重新排序的项目，或者
[继续我的评论] - 或从列表一中取出并放入列表二的项目。你看到了我的问题——我真的需要至少知道“删除”的事件，所以我会有（在更新事件时）接收、删除和简单重新排序的案例。感谢您的帮助！

【解决方案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' }

【讨论】：