jquery-ui - jQuery Draggable + Sortable - 如何拒绝放入排序？

Question

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

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

有人有什么建议吗？

Answer 1

您可以通过调用cancel来恢复拖动操作。 draggable的方法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...
        }
    }
});

您可以在 this fiddle 中看到结果(第四项将始终恢复)。

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

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

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

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