Pure JavaScript Drag and Drop Library – dragula.js

Category: Drag & Drop , Javascript , Recommended | September 12, 2016
Author: bevacqua
Views Total: 6,284
Official Page: Go to website
Last Update: September 12, 2016
License: MIT

Preview:

Pure JavaScript Drag and Drop Library – dragula.js

Description:

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>
  <div id="right" class="container">
    <div>Item 5.</div>
    <div>Item 6.</div>
    <div>Item 7.</div>
  </div>
</div>

Enable the drag and drop.

dragula([left, right]);

Changelog:

09/12/2016

  • Fixed Bug when revert on spill and drag a copy item

You Might Be Interested In:


2 thoughts on “Pure JavaScript Drag and Drop Library – dragula.js

  1. Geo Washington I

    Poor documentation, too confusing, too convoluted.

    Reply
  2. Yu

    Two Fundamental Problems – 1. How do you UNDO and 2. how do you bring back a box of items if I remove ALL the items from one of the boxes

    Reply

Leave a Reply