DragonflyJS is a tiny vanilla JavaScript library that enables sorting (dragging and dropping) functionality with zero dependencies.
By implementing this library, a user is able to drag and drop elements and reorder them. This library enables a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items are draggable.
Get DragonflyJS 1.2.0 from GitHub
Demo
Check out the demo below:
See the Pen Vanilla JavaScript Drag & Drop by Ciprian (@ciprian) on CodePen.
How to use
Create a DOM structure, based on your desired elements:
<div class="drag-container">
<div id="item1" class="drag-box">Item #1</div>
<div id="item2" class="drag-box">Item #2</div>
<div id="item3" class="drag-box">Item #3</div>
<div id="item4" class="drag-box">Item #4</div>
<div id="item5" class="drag-box">Item #5</div>
<div id="item6" class="drag-box">Item #6</div>
<div id="item7" class="drag-box">Item #7</div>
<div id="item8" class="drag-box">Item #8</div>
<div id="item9" class="drag-box">Item #9</div>
<div id="item10" class="drag-box">Item #10</div>
</div>Call it using the dragonfly(element) function:
document.addEventListener("DOMContentLoaded", function () {
'use strict';
dragonfly('.drag-container', function () {
console.log('This is a callback');
});
});Use the second parameter of dragonfly() to add a callback event when dragging (mouseup) has stopped.
