Dublin, Ireland

All Content Copyright ©2019

DragonflyJS – Vanilla JavaScript Drag and Drop

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.

Added by Ciprian on Tuesday, May 29, 2018 in Blog, JavaScript

Do you want better SEO? More traffic? More conversions? More growth? We help companies exponentially grow their traffic and conversions, while outranking their competitors. With more than 10 years of experience, we’ve learned what is valuable to our clients.
SEO Dublin | SEO Malta

My Battle Tested Recommendations


Disclaimer: These recommendations contain affiliate links.

Privacy Policy