getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2018
getButterfly

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

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


My Battle Tested Recommendations

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush

Disclaimer: These recommendations contain affiliate links.