Drag and Drop in Angular with Dragula - Trigger Confirmation on Drop Event

Question

Drag and Drop in Angular with Dragula - Trigger Confirmation on Drop Event

I need to implement a confirm modal dialog (UI Kit) when an element is dragged into a new bag using angular 1.4.8 and angular-dragula. If the user clicks ok, the process should continue, but if they click NO, the element should return to its original bag.

Here's 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(){
            // function to cancel the drop...
        });
    } else {
        console.log('drag confirmed - no modal required');
    }
});

The dialog is displaying correctly, and clicking NO triggers the event, but I am unable to find how to cancel the drop. I searched through dragula's documentation with no success.

Appreciate any help on this matter.

javascript angularjs dragula

Answer 1

Answer №1

In order to achieve this, manual intervention is required as Dragula does not offer a built-in solution for it. When an item is dropped into the container, it gets added to the DOM.

To resolve this issue, you will need to remove the element and return it 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 included source[0].id !== "done" to prevent the modal from appearing when rearranging items in the "Done" container.

It is important to note that this method does not consider the previous order of elements in the source container. It simply adds the element at the end.

You can find a JSFiddle demo here.

Answer 2

In order to achieve this, manual intervention is required as Dragula does not offer a built-in solution for it. When an item is dropped into the container, it gets added to the DOM.

To resolve this issue, you will need to remove the element and return it 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 included source[0].id !== "done" to prevent the modal from appearing when rearranging items in the "Done" container.

It is important to note that this method does not consider the previous order of elements in the source container. It simply adds the element at the end.

You can find a JSFiddle demo here.

Drag and Drop in Angular with Dragula - Trigger Confirmation on Drop Event

Answer №1

Similar questions

It seems that BeautifulSoup and Selenium are unable to locate the div or text elements on the website

If an AngularJS Form Item is hidden with jQuery's hide() method, will it still be validated?

Is there a way to set up an automatic pop-up for this?

Angular 2 has its own version of $q.when called RxJs

Can an object serve as a property name for another object?

How to Utilize Raw HTML in GWT with the Power of Jquery/Javascript?

Show occurrences of an array categorized by date using JSON format

Encountering issues while trying to incorporate a trading chart library into an Angular 7 project

Struggling with incorporating a button into a ReactJS table

Is it possible for me to design a user interface using codiqa/jetstrap and then incorporate angular keywords?

Adjust the CSS for the "a" tag's "title" attribute

Issue: Uncaught Error in Summernote and Electron - Module 'jquery' not found

Tips on implementing multiple consecutive setState calls in ReactJS

Enhance your Verold model object with engaging animations

Tips on preventing right-click actions in jqGrid

Tips for successfully passing a parameter to the --world-parameters or npm run command for it to be utilized by scripts within the package

How can I make SocketIO work with Nodejs and PHP?

Convert the contents of the uploaded file to a JSON format

Best practice for redirection after a $http.post request in angularjs

Enable/disable specific dates in datepicker depending on dropdown selection