jquery - 确认 jQuery 可排序接收事件

Question

我有两个单独的 ul 列表:列表 A 和列表 B

由于 jQuery UI 插件，它们都可以排序。

我正在开发的项目的用户希望在项目从一个列表移动到另一个列表时确认操作，但在同一列表内移动时则不需要。当触发操作时，页面将向服务器发起 Ajax 请求以更新列表的位置。

令我困扰的是事件的顺序。到目前为止，我的经验是更新事件在接收事件之前触发，因此在显示确认对话框之前，请求已经启动。

不幸的是，我忘记了哪个列表触发了请求，但就我而言，这并不重要:如果将一个项目拖到另一个列表上，则在用户确认操作之前不应将任何内容发送到服务器。

我已经使用过很多 jQuery，但我想我可以在这方面使用一些帮助。

Javascript:

$('.sortable').sortable({
    start: function (event, ui) {
        $(ui.helper).addClass("sortable-drag-clone");
    },
    stop: function (event, ui) {
        $(ui.helper).removeClass("sortable-drag-clone");
    },
    update: function (event, ui) {

        if ($(ui.sender).length == 0) {
            alert("item was moved within the same list.");
            //Make request
        } else {
            //do nothing.
        }
    },
    receive: function (event, ui) {
        if (confirm("show move or copy dialog, from {0} to {1}")) {
            //do request
        } else {
            $(ui.sender).sortable("cancel");
            //no request
        }
    },
    tolerance: "pointer",
    connectWith: ".sortable",
    placeholder: "sortable-draggable-placeholder",
    forcePlaceholderSize: true,
    appendTo: 'body',
    helper: 'clone',
    zIndex: 666
}).disableSelection();

标记:

<div id="list-A">
    <ul class="sortable">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>
<div id="list-B">
    <ul class="sortable">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

更新:

场景一)用户将 A1 拖动到 A3 - 结果是没有确认对话框，因此会向服务器发送请求，以便保留新的排序顺序。

场景二)用户将 A1 拖动到 B3(或 B3 到 A1) - 结果是一个确认对话框，然后，仅当该对话框被接受时，才会向服务器发送请求。正如我在一条评论中所述，我已经解决了两个请求。

Answer 1

那么您就不需要 update 方法，只需将其删除即可! Example link .