Angular + Dragula - Confirm on drop event

Question

I would like to show a confirm modal dialog (UI Kit) when i drop an element in a new bag (I am using angular 1.4.8 and angular-dragula) . If I click ok, I want to continue the process, but if I click NO, i would like the element to come back to his origin bag.

This is my code so far :

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

So far my dialog is showing perfectly, and if I click NO, the event is triggered, I just cant find how to cancel the drop ( I tried to find on dragula's documentation, but couldnt make it work.

Thank you.

Answer 1

I think you will have to do this manually, Dragula doesn't seem to provide a built-in mechanism for this. Once an item is dropped into the container, it is added to the DOM.

You will have to remove the element and put it back to the source container.

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

I added the source[0].id !== "done" to prevent the modal popping up if you reorder items in the "Done" container.

Also note that this doesn't take the previous ordering of the source container into account. It just appends the element as the last element.

JSFiddle available here.