Smooth Drag And Drop Library – dragdrop.js

Category: Drag & Drop , Javascript | January 19, 2019
Author: modugno
Views Total: 3,236
Official Page: Go to website
Last Update: January 19, 2019
License: MIT

Preview:

Smooth Drag And Drop Library – dragdrop.js

Description:

dragdrop.js is a Vanilla JavaScript library that makes it easy to drag and drop specific elements with a smooth animation. Written in JavaScript ES6.

See also:

How to use it:

Install and import the dragdrop-js into the project.

npm install dragdrop-js --save

Or download the zip and then insert the JavaScript file drogdrop.js into the html document.

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

Add the CSS class ‘dragdrop-target’ to the target drap-and-drop container.

<div class="dragdrop-target">
  ...
</div>

Add the CSS class ‘dragdrop’ to the target elements which should be draggable and droppable.

<div class="dragdrop-target">
  <img src="1.jpg" class="dragdrop" data-id="1">
</div>

<div class="dragdrop-target">
  <img src="2.jpg" class="dragdrop" data-id="2">
</div>

<div class="dragdrop-target">
  <img src="3.jpg" class="dragdrop" data-id="3">
</div>

Initialize the drag and drop library.

new dragdrop.start((dom, api) => {
    dom.addEventListener('drop', (event) => {
        console.log( api.orders );
    })
});

Changelog:

01/19/2019

  • Bugfix for Firefox

You Might Be Interested In:


One thought on “Smooth Drag And Drop Library – dragdrop.js

Leave a Reply