Question

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

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

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"以阻止模式弹出，如果您重新排序＆＃34;完成＆＃34;容器

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

JSFiddle可用here。

Angular + Dragula - 确认放置事件

1 个答案: