Question

我有一个可排序的视频列表和一组可拖动的视频。基本上我想确保拖入的视频不在视频的前5分钟内。由于视频长度不同，我想在下降时测试一下 - 加起来时间，如果不是5分钟还原并显示错误。

我已经尝试连接到draggable和sortable（包括未记录的revert回调）的所有回调来进行测试，但无论我尝试什么，dom总是会被更改（并且sortable调用它的更新回调）...

有人有任何建议吗？

Answer 1

您可以通过调用draggable窗口小部件的cancel方法来恢复拖动操作（该方法未记录，但其名称不以下划线开头，这可能会使其“更安全”使用可靠）。它只适用于start事件，因为其他事件发生得太晚，无法触发恢复动画。

但是，即使取消拖动操作，sortable窗口小部件仍会注册掉落，因此您还必须删除新添加的项目（在stop事件期间，作为{{ 1}}事件发生得太早了）：

start

您可以在this fiddle中看到结果（第四项将始终还原）。

更新：正如John Kurlak在评论中正确指出的那样，由于调用$("#yourSortable").sortable({ start: function(event, ui) { if (!canDropThatVideo(ui.item)) { ui.sender.draggable("cancel"); } }, stop: function(event, ui) { if (!canDropThatVideo(ui.item)) { ui.item.remove(); // Show an error... } } });，该项目无法恢复，但因为draggable("cancel")为ui.sender在我们的例子中。投掷任何事都会导致相同的行为。

唉，我试过的所有其他组合导致项目在没有动画的情况下被还原，所以我们最好的选择是避免访问null而是写下类似的东西：

ui.sender

但未捕获的异常仍会出现在控制台中。

Answer 2

我发现了一种不同的方式。如果你不介意没有它的动画浮动到它的原始位置，你可以随时使用这个

.droppable({
    drop: function (event, ui) {

        var canDrop = false;

        //if you need more calculations for
        //validation, like me, put them here

        if (/*your validation here*/)
            canDrop = true;

        if (!canDrop) {
            ui.draggable.remove();
        }
        else{
            //you can put whatever else you need here
            //in case you needed the drop anyway
        }
    }
}).sortable({
    //your choice of sortable options
});

我用过这个因为我需要掉落事件。

jQuery Draggable + Sortable - 如何拒绝掉入排序？

2 个答案: