Dragula – Drag and Drop Lists so simple it hurts

Dragula

Dragula, a great Drag ‘n’ Drop pure JavaScript Sorting library with a great Name and the insane compatibility for Internet Explorer 7 (with the respective onboard array Polyfill). Next to the iife browser edition is dragula also available as NodeJS and AMD module as well as for Angular (1, 2) and React. This library doesn’t use the HTML 5 Drag and Drop features, therefore it supports touch-devices!

The last official Release is 2 years ago (Septamber 2016), and the last commit on the GitHub repository was passed in June 2017. Nevertheless, dragula continues to suck the blood of its users with his support for connected lists, item-copying and drag handles. But the core functions are geared for div-based containers and default lists, tables are not supported at all.

Download the latest version of Dragula as .ZIP or as .TAR package!

npm i dragula --save

yarn add dragula --save

bower install dragula --save

Instructions

Dragula is available as minified and normal version and also offers a small Style-Guide Stylesheet for the single used class names. You can embed the JavaScript file also through a CDN:

https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js

 

Load Dragula

You should embed the Stylesheet (if needed) within the HTML header, but the JavaScript file can be be located wherever you want, but we recommend to load it immediately after the opened <body> tag.

<DOCTYPE html>
<html>
    <head>
        <!-- Optional JavaScript -->
        <script type="text/javascript" src="/css/dragula.css"></script>
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/dragula.js"></script>
    </body>
</html>

 

Init Dragula

The files gets parsed and now just a single line of code turns your lists and containers into Drag and Drop sortable and bloody masterpieces. To be sure, we write this line of code within the “DOMContentLoaded” event, which executes after the DOM has been fully loaded, but before all the page assets (Images, …) has.

document.addEventListener("DOMContentLoaded", function(){
    "use strict";
   
    // Just pass your container(s) within an array
    dragula([document.getElementById("dragula")]);

});

 

Configure Dragula

Everything works, but not as we want to. No Problem, Dragula comes with a some options.

dragula([document.getElementById("dragula")], {
    direction:                  "vertical",
    copy:                       false,
    copySortSource:             false,
    revertOnSpill:              false,
    removeOnSpill:              false,
    mirrorContainer:            document.body,
    ignoreInputTextSelection:   true,
});

 

Configure: Options

direction
When an element is dropped onto a container, it’ll be placed near the point where the mouse was released. If the direction is ‘vertical’, the default value, the Y axis will be considered. Otherwise, if the direction is ‘horizontal’, the X axis will be considered.
copy
If copy is set to true (or a method that returns true), items will be copied rather than moved. This implies the following differences:

Event Move Copy
drag Element will be concealed from source Nothing happens
drop Element will be moved into target Element will be cloned into target
remove Element will be removed from DOM Nothing happens
cancel Element will stay in source Nothing happens
copySortSource
If copy is set to true (or a method that returns true) and copySortSource is true as well, users will be able to sort elements in copy-source containers.
revertOnSpill
By default, spilling an element outside of any containers will move the element back to the drop position previewed by the feedback shadow. Setting revertOnSpill to true will ensure elements dropped outside of any approved containers are moved back to the source element where the drag event began, rather than stay at the drop position previewed by the feedback shadow.
removeOnSpill
By default, spilling an element outside of any containers will move the element back to the drop position previewed by the feedback shadow. Setting removeOnSpill to true will ensure elements dropped outside of any approved containers are removed from the DOM. Note that remove events won’t fire if copy is set to true.
mirrorContainer
The DOM element where the mirror element displayed while dragging will be appended to. Defaults to document.body.
ignoreInputTextSelection
When this option is enabled, if the user clicks on an input element the drag won’t start until their mouse pointer exits the input. This translates into the user being able to select text in inputs contained inside draggable elements, and still drag the element by moving their mouse outside of the input — so you get the best of both worlds.

This option is enabled by default. Turn it off by setting it to false. If its disabled your users won’t be able to select text in inputs within dragula containers with their mouse.

Leave a Reply

Top