Have you ever wanted a drag and drop library that just works? That doesn't just depend on bloated frameworks, that has great support? That actually understands where to place the elements when they are dropped? That doesn't need you to do a zillion things to get it to work? Dragula is the answer.

By default, dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list. If the element is dropped anywhere that's not one of the containers, the event will be gracefully cancelled according to the revertOnSpill and removeOnSpill options.

Note that dragging is only triggered on left clicks, and only if no meta keys are pressed.

1. Initialize the plugin by referencing the necessary files:

                
                    <script src="/path/to/dragula.js"></script>
                    <link rel="stylesheet" type="text/css" href="/path/to/dragula.css">
                
            

2. Allows the user to drag elements from left into right, and from right into left.

                
                    dragula([document.querySelector('#left'), document.querySelector('#right')]);
                
            

3. You can also provide an options object. Here's an overview of the default values.

                
                    dragula(containers, {
                        isContainer: function (el) {
                        return false; // only elements in drake.containers will be taken into account
                        },
                        moves: function (el, source, handle, sibling) {
                        return true; // elements are always draggable by default
                        },
                        accepts: function (el, target, source, sibling) {
                        return true; // elements can be dropped in any of the `containers` by default
                        },
                        invalid: function (el, handle) {
                        return false; // don't prevent any drags from initiating by default
                        },
                        direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
                        copy: false,                       // elements are moved by default, not copied
                        copySortSource: false,             // elements in copy-source containers can be reordered
                        revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
                        removeOnSpill: false,              // spilling will `.remove` the element, if this is true
                        mirrorContainer: document.body,    // set the element that gets mirror elements appended
                        ignoreInputTextSelection: true     // allows users to select input text, see details below
                    });
                
            

4. You can omit the containers argument and add containers dynamically later on.

                
                    var drake = dragula({
                        copy: true
                    });
                    drake.containers.push(container);
                
            

5. You can also set the containers from the options object.

                
                    var drake = dragula({ containers: containers });
                
            

6. You could also not set any arguments, which defaults to a drake without containers and with the default options.

                
                    var drake = dragula();
                
            

Refer following links for usage:

Type	URL
Plugin Link	https://bevacqua.github.io/dragula/
Github Page	https://github.com/bevacqua/dragula
Template Page	http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/add-on-drag-drop.html