Press "Enter" to skip to content

Super Easy to Set Up Drag and Drop with Vanilla Javascript | dragula.js

Dragula, it includes support for Framework Vanilla JavaScript, Angular, and React. Browser support includes both the sane browser and IE7 +.

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

Features:

  • Very easy to set up
  • No bloated dependencies
  • Plots the sort order on its own
  • Shadow, where the item will drop, provides visible notes
  • Touch events!
  • It handles clicks smoothly without any configuration

How to make use of it:

Load the dragula.js JS library on the finish of the doc.

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

Create two containers that you could transfer 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]);

Pure JavaScript Drag and Drop Library, Dragula Plugin/Github


See Demo And Download

Official Website(bevacqua): Click Here

This superior jQuery/javascript plugin is developed by bevacqua. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.