javascript - Angular + Dragula-放下事件确认

当我将元素放入新包中时（我正在使用angular 1.4.8和angular-dragula），我想显示一个确认模式对话框（UI Kit）。如果单击“确定”，我想继续该过程，但是如果单击“否”，我希望该元素返回到他的原始包。

到目前为止，这是我的代码：

dragulaService.options($scope, 'tasks', {
    revertOnSpill: true
});

$scope.$on('tasks.drop', function (e, el, target, source) {
    if (target[0].id == 'done') {
        UIkit.modal.confirm("Are you sure?", function(){
            console.log('drag confirmed');
        }, function(){
            // the function cancelling the drop...
        });
    } else {
        console.log('drag confirmed - no modal required');
    }
});

到目前为止，我的对话框显示得非常完美，如果我单击“否”，则事件被触发，我只是无法找到取消取消操作的方法（我试图在dragula的文档中找到，但是无法使其工作。

谢谢。

最佳答案

我认为您将必须手动执行此操作，Dragula似乎并未为此提供内置的机制。将项目放入容器后，便将其添加到DOM。

您将必须删除元素并将其放回源容器。

$scope.$on('tasks.drop', function (e, el, target, source) {
    if (target[0].id === "done" && source[0].id !== "done") {
        UIkit.modal.confirm("Are you sure?", function(){}, function(){
            $(el).remove();
            $(source).append(el);
        });
    }
});

我添加了source[0].id !== "done"以防止在对“完成”容器中的项目重新排序时弹出模式对话框。

还要注意，这并未考虑源容器的先前顺序。它只是将元素追加为最后一个元素。

JSFiddle可用here。

关于javascript - Angular + Dragula-放下事件确认，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35528488/