Smooth Drag And Drop Library – dragdrop.js

Category: Drag & Drop , Javascript | January 19, 2019
Views Total:1,488 views
Official Page:Go to website
Last Update:January 19, 2019


Smooth Drag And Drop Library – dragdrop.js


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">

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 class="dragdrop-target">
  <img src="2.jpg" class="dragdrop" data-id="2">
<div class="dragdrop-target">
  <img src="3.jpg" class="dragdrop" data-id="3">

Initialize the drag and drop library.

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



  • Bugfix for Firefox

You Might Be Interested In:

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

Leave a Reply