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

Question

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

我已经尝试连接到draggable和sortable(包括未记录的revert回调)的所有回调来进行我的测试但是无论我尝试什么,dom总是被改变(并且可以排序调用它的更新回调)......

有没有人有什么建议？

Answer 1

您可以通过调用可拖动窗口小部件的cancel方法来恢复拖动操作(该方法未记录,但其名称不以下划线开头,这可以说使其"更安全"可靠地使用).但它仅在事件期间起作用,因为其他事件发生得太晚而无法触发恢复动画.start

但是,即使拖动操作被取消,可排序窗口小部件仍会注册掉落,因此您还必须删除新添加的项目(在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...
        }
    }
});

您可以在这个小提琴中看到结果(第四个项目将始终还原).

更新:正如约翰Kurlak理应在评论中指出,该项目不会因为调用的恢复draggable("cancel"),但由于ui.sender是null在我们的例子.抛出任何东西都会导致相同的行为.

唉,我尝试的所有其他组合导致项目在没有动画的情况下被还原,所以也许我们最好的选择是避免访问ui.sender,而是写下类似的东西:

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

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