Pure JavaScript Drag and Drop Library – dragula.js

Category: Drag & Drop , Javascript | April 15, 2015
Author: bevacqua
Views Total: 3,382
Official Page: Go to website
Last Update: April 15, 2015
License: MIT


Pure JavaScript Drag and Drop Library – dragula.js


dragula.js is a simple, dependency-free, touch-enabled JavaScript library that provides drag and drop functionality on DOM elements.

Basic usage:

Load the dragula.js JS library at the end of the document.

<script src="dist/dragula.js"></script>

Create two containers that you can move stuff between these two containers.

<div class="wrapper">
  <div id="left" class="container">
    <div>Item 1.</div>
    <div>Item 2.</div>
    <div>Item 3.</div>
    <div>Item 4.</div>
  <div id="right" class="container">
    <div>Item 5.</div>
    <div>Item 6.</div>
    <div>Item 7.</div>

Enable the drag and drop.

dragula([left, right]);
  • Geo Washington I

    Poor documentation, too confusing, too convoluted.