DragonflyJS – Vanilla JavaScript Drag and Drop

πŸ‘‹ Ciprian on Tuesday, May 29, 2018 in Blog, JavaScript
Last modified on Thursday, May 20, 2021

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

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 Thursday, May 20, 2021.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy