javascript - Angular + Dragula - Confirm on drop event - Stack Overflow

admin管理员组

文章数量:1024945

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 e 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.

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 e 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.

• javascript
• angularjs
• dragula

Share Improve this question Follow edited Feb 20, 2016 at 23:18 Szabolcs Dézsi 8,8432323 silver badges2929 bronze badges asked Feb 20, 2016 at 20:18 NOaMTLNOaMTL 19311 gold badge44 silver badges1414 bronze badges 1

• 1 See github./bevacqua/dragula/issues/419 – leif.gruenwoldt Commented Nov 16, 2016 at 1:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

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 e 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.

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 e 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.

• javascript
• angularjs
• dragula

Share Improve this question Follow edited Feb 20, 2016 at 23:18 Szabolcs Dézsi 8,8432323 silver badges2929 bronze badges asked Feb 20, 2016 at 20:18 NOaMTLNOaMTL 19311 gold badge44 silver badges1414 bronze badges 1

• 1 See github./bevacqua/dragula/issues/419 – leif.gruenwoldt Commented Nov 16, 2016 at 1:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptAngularDragulaConfirm on drop eventStack Overflow