角+ Dragula -确定落点事件

Question

我想显示一个确认模态对话框(UI工具包)时，我把一个元素放在一个新的袋子(我使用角1.4.8和角-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"，以防止在“完成”容器中重新排序项目时出现的模式弹出。

还请注意，这没有考虑到源容器先前的排序。它只是将元素追加为最后一个元素。

JSFiddle可用这里.