jQuery 可拖动 +可排序 - 如何拒绝排序？

Question

我有一个可排序的视频列表和一组可拖动的视频。基本上我想确保拖入的视频不在视频的前 5 分钟内。由于视频长度各不相同，我想在下降时对此进行测试 - 将到那时的时间加起来，如果不是 5 分钟则恢复并显示错误。

我已经尝试挂钩所有可拖动和可排序的回调（包括未记录的恢复回调）来进行测试，但无论我尝试什么，dom 总是会发生变化（并且可排序调用其更新回调）...

有人有任何建议吗？

Answer 1

您可以通过调用 draggable 的 cancel 方法来恢复拖动操作widget（该方法没有文档记录，但其名称不以下划线开头，这可以说使其使用起来“更安全”）。不过，它仅在 start 事件期间起作用，因为其他事件发生得太晚而无法触发恢复动画。

但是，即使拖动操作被取消， sortable 小部件仍然会注册一个放置，因此您也必须删除新添加的项目（在 stop 事件期间，因为 start 事件发生得太早）：

$("#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...
        }
    }
});

您可以在 这个小提琴（第四项将始终恢复）。

更新： 正如 John Kurlak 在评论中正确指出的那样，该项目不会因为调用 draggable("cancel") 而恢复，而是因为 ui.在我们的例子中，sender 为 null。扔任何东西都会导致相同的行为。

唉，我尝试的所有其他组合都会导致项目在没有发生动画的情况下被恢复，所以也许我们最好的选择是避免访问 ui.sender ，而是编写如下内容：

start: function(event, ui) {
    if (!canDropThatVideo(ui.item)) {
        throw "cancel";
    }
}

未捕获的异常仍然会发生不过，出现在控制台中。

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
});

我使用它是因为无论哪种方式我都需要放置事件。