Question

我有两个单独的ul列表： list-A和list-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>

更新

情景I） 用户拖动A1到A3 - 结果是没有确认对话框，因此请求被发送到服务器，以便新的排序顺序保持不变。

情景II） 用户拖动A1到B3（或B3到A1） - 结果是确认对话框，然后，只有在接受对话框时，才会向服务器发送请求。正如我在其中一条评论中所描述的那样，我已经解决了两个请求。

Answer 1

您不需要update方法，只需将其删除即可！ Example link

确认jQuery可排序接收事件

1 个答案: