Angular + Dragula - 掉落事件确认

Question

我想在将元素放入新包时显示确认模式对话框（UI 套件）（我正在使用 angular 1.4.8 和 angular-德拉古拉）。如果我点击确定，我想继续这个过程，但如果我点击否，我希望元素回到他的原始包。

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

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" 以防止在您重新订购 "Done" 容器中的项目时弹出模式。

另请注意，这并未考虑源容器的先前排序。它只是将元素附加为最后一个元素。

JSFiddle 可用 here。

Angular + Dragula - 掉落事件确认

Angular + Dragula - Confirm on drop event

javascript

angularjs

dragula