Smooth Drag And Drop Library – dragdrop.js

Preview:

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:

• 10 Best Drag And Drop JavaScript Libraries

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