确认jQuery可排序接收事件

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那么您不需要该方法，只需将其删除即可！示例链接。