How to create ajax function using dragula drag and drop in asp.net

Jordan Trajkov

5y2.9kAJAX

Hello guys, i have 3 different repeater controls designed with bootstrap 4 and dragula jquery library, they read items from database and display them in the page by status type in the database. You can see how they looks like here:

Now when i move items with drag and drop from one to another repeated they work nice, but that is temporary state, after i refresh the page they all bring back the state from database.

Bootstrap use Dragula jquery library for drag and drop.

My question is, is there anybody who have created ajax function using Dragula api to save the new state of the items after they are move with drag and drop?

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jordan Trajkov5y ago
OK and what is dropContainer which is this container?
Sachin Singh5y ago
those are dragula containers, in your case repeater controls pending , ongoine etc
Jordan Trajkov5y ago
What is dragula-1,dragula-2,dragula-3,dragula-4?
Sachin Singh5y ago
just fetch the value from drop container, suppose you dragged from Pending to Ongoing then fetch value from Ongoing container and send Ajax post
(function ($) {
            'use strict';
            dragula([document.getElementById("dragula-1"), document.getElementById("dragula-2"),
            document.getElementById("dragula-3"), document.getElementById("dragula-4")])
                .on('drop', function (el) {
                         var values= new Array();
        $('dropContainer').each(function (i) {
            values.push($(this).text());
        })

        $.ajax({
            type: "POST",
            url: '@Url.Action("ReassignToDev", "Admin")',
            dataType: 'JSON',
            data: { userIds: developerIds },

            success: function (response) {
                alert(message);
            },
            error: function (response) {
                alert(message);
            }
        });
                })
        })(jQuery);