角度 + 德拉古拉 - 在掉落事件时确认

Question

我想在将元素放入新袋中时显示一个确认模态对话框（UI Kit）（我正在使用角度 1.4.8 和角度德拉古拉）。如果我单击"确定"，我想继续该过程，但是如果我单击"否"，我希望元素返回到他的原点袋。

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

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 的文档上找到，但无法使其工作。

谢谢。

Answer 1

我认为您必须手动执行此操作，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可在此处获得。