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

Demo

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

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

Related Articles


Privacy Policy