DragonflyJS – Vanilla JavaScript Drag and Drop

Follow me!

If you like this article, go ahead and follow me on Twitter:

Follow @getButterfly

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


Check out the demo below:

Item #1
Item #2
Item #3
Item #4
Item #5
Item #6
Item #7
Item #8
Item #9
Item #10

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>

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.

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

πŸ‘‹ Added by Ciprian on Tuesday, May 29, 2018 in Blog, JavaScript. Last modified on Tuesday, July 17, 2018.


Contribute to this article by sharing your opinion on Twitter:

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started
Privacy Policy