Resort Elements With Drag And Drop – DragonflyJS

Preview:

Description:

DragonflyJS is a small drag’n’drop library which enables a group of elements within a container to be sortable via drag and drop. Without any 3rd dependencies.

How to use it:

Import the primary JavaScript file ‘dragonfly.js’ into your document.

<script src="dragonfly.js"></script>

Add the class ‘drag-box’ to your elements which should be draggable and sortable.

<div class="drag-box" id="item1">Item #1</div>
<div class="drag-box" id="item2">Item #2</div>
<div class="drag-box" id="item3">Item #3</div>
<div class="drag-box" id="item4">Item #4</div>
<div class="drag-box" id="item5">Item #5</div>
...

Add the item group to a container element with the class of ‘drag-container’. Done.

<div class="drag-container">
  <div class="drag-box" id="item1">Item #1</div>
  <div class="drag-box" id="item2">Item #2</div>
  <div class="drag-box" id="item3">Item #3</div>
  <div class="drag-box" id="item4">Item #4</div>
  <div class="drag-box" id="item5">Item #5</div>
  ...
</div>

Changelog:

07/17/2018

• Update dragonfly.js