11

我有一个可排序的视频列表和一组可拖动的视频。基本上我想确保拖入的视频不在视频的前 5 分钟。随着视频长度的变化，我想在 drop 上进行测试 - 将时间加起来，如果不是 5 分钟，则恢复并显示错误。

我已经尝试连接到所有可拖动和可排序的回调（包括未记录的恢复回调）来做我的测试，但无论我尝试什么，dom 总是被改变（并且可排序调用它的更新回调）......

有没有人有什么建议？

4

2 回答 2

10

您可以通过调用可拖动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...
        }
    }
});

您可以在这个 fiddle中看到结果（第四项将始终恢复）。

更新：正如约翰库拉克在评论中正确指出的那样，该项目不会因为调用而恢复draggable("cancel")，而是因为ui.sender在null我们的情况下。投掷任何东西都会导致相同的行为。

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

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

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

于 2011-08-19T19:31:47.220 回答
3

我找到了另一种方式。如果你不介意让它的动画飘回原来的地方，你可以随时使用它

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

我之所以使用它，是因为无论哪种方式我都需要 drop 事件。

于 2014-04-01T11:12:28.037 回答