jQueryUI Sortable-根据确认框取消排序

Question

首先，我在这里创建了一个小提琴来演示以下问题。

$(function() {
$(".ui-sortable").sortable({
    opacity: 0.8,
    revert: 200,
    helper: "clone"
}).disableSelection();

$("#list1").sortable("option", "connectWith", "#list2");
$("#list2").sortable("option", "connectWith", "#list1");

$(".ui-sortable").on("sortreceive", function (event, ui) {

    var answer = confirm("Move item?");
    if (!answer) {
        $(ui.sender).sortable('cancel');
        return false;
    }

    var origZoneId = ui.sender.attr("id");
    var dockId = ui.item.attr("id");   
    var destZoneId = event.target.id;

    alert("Moving to: " + destZoneId + "From: " + origZoneId);

  });
});

我的问题与此处的问题类似，但是当执行答案时，我发现receive事件仍在触发，并且我想防止这种情况发生，因此我将确认框移到了receive事件。 除以下情况外，一切正常：

步骤 ：

• 将项目从列表1移动到列表2

• 将项目移回列表1，但选择“取消”。

  当前输出 ：项目停留在列表1中

  预期的输出 ：项目移回到列表2

关于为什么发生这种情况以及如何避免的任何想法？ 我曾想过将确认框移回“删除”事件并设置一个标志，但这对我而言似乎并不干净。 有更容易的方法吗？

Answer 1

问题是您返回的是false 。 这似乎正在停止内部流程。

从取消事件文档中：

取消当前可排序对象中的更改，并将其还原到开始当前排序之前的状态。 在停止和接收回调函数中很有用。

无需返回false ，您可以将其余代码添加到else部分中。

更新的小提琴

Answer 2

我将其添加到可排序的构造函数中

$( ".js-table-sortable" ).sortable(
    { 
        stop: function(event, ui)
        {
            var resp = confirm("Are you sure?");

            if(!resp){
                return false;
            }

        }
   });

此更改取消排序选项，并将拖动的行返回到它的位置。