Angular + Dragula - 确认放置事件

Question

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

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

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 在这里可用.