1

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

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

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');
    }
});

到目前为止，我的对话框显示完美，如果单击 NO，则触发事件，我只是找不到如何取消放置（我试图在 Dragula 的文档中找到，但无法使其工作。

谢谢你。

4

1 回答 1

5

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

于 2016-02-21T00:36:53.433 回答