Draggable List View With Vanilla JavaScript

Preview:

Description:

An ES6 JavaScript library to create a list view where the users are able to re-sort list items via drag and drop.

How to use it:

Install the library.

# Yarn
$ yarn add native-js-dnd-list
# NPM
$ npm install native-js-dnd-list --save

The HTML for the list view.

<div id="list" class="list">
  <div class="divider"></div>
  <div class="item">
    Hello!
    <div class="item-id">(id: 0)</div>
  </div>
  <div class="divider"></div>
  <div class="item">
    This is drag'n'drop list written on native javascript
    <div class="item-id">(id: 1)</div>
  </div>
  <div class="divider"></div>
  <div class="item">
    Just drag and drop list items to see how it's working!
    <div class="item-id">(id: 2)</div>
  </div>
  <div class="divider"></div>
  <div class="item">
    If you're interesting in source code, check my
    <a href="https://github.com/loonywizard/native-js-dnd-list" target="_blank">GitHub repo</a>
    <div class="item-id">(id: 3)</div>
  </div>
  <div class="divider"></div>
  <div class="item">
    Found any bugs or have a suggestion? Please, add an
    <a href="https://github.com/loonywizard/native-js-dnd-list/issues" target="_blank">Issue</a>!
    <div class="item-id">(id: 4)</div>
  </div>
  <div class="divider"></div>
</div>