Question

首先，我创建了一个fiddle here来演示以下问题。

$(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);

  });
});

我的问题类似于one here，但在实施答案时，我发现receive事件仍然被触发，我想阻止这一点，所以我将确认框移到{{ 1}}事件。一切正常，除非：

步骤：

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

当前输出：项目保留在列表1
中
预期输出：item移回List 2

关于为什么会发生这种情况以及如何避免这种情况的任何想法？我想把确认框移回'删除'事件并设置一个标志，但这对我来说似乎不太干净。有更简单的方法吗？

Answer 1

问题是你要归还false。这似乎正在制止内部流程。

来自cancel events文档：

取消当前可排序的更改并将其恢复为当前排序开始之前的状态。在停止和接收回调函数中很有用。

无需返回false，您可以在else部分添加剩余代码。

Updated Fiddle

Answer 2

我在可排序的构造函数

中添加它

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

            if(!resp){
                return false;
            }

        }
   });

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

jQueryUI Sortable - 基于确认框取消排序

2 个答案:

Updated Fiddle