Drag'n'drop List Reordering Plugin - jQuery DraggableNestableList.js

DraggableNestableList.js is a tiny jQuery draggable list plugin that allows the user to drag an item (or a sublist) from one position to another position in the list while maintaining its nesting level. 

Based on the drag and drop principle, it lets the user drag items in an HTML list to change their order easily.

How to use it:

1. Load the necessary jQuery library and Material Icons in the document.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>

2. Load the DraggableNestableList.js plugin's files.

<link rel="stylesheet" href="/path/to/DraggableNestableList.min.css" />
<script src="/path/to//DraggableNestableList.js"></script>

3. Initialize the DraggableNestableList on your nested HTML list and the plugin will take care of the rest.

<ul id="myList">
  <li>simple item 1</li>
  <li><a href="#">simple item 2</a></li>
  <li>simple item 3</li>
  <li>
    Nested Item 1
    <ul>
      <li>simple item 1</li>
      <li>simple item 2</li>
      <li>simple item 3</li>
      <li>
        Nested Item 2
        <ul>
          <li>simple item 1</li>
          <li>simple item 2</li>
          <li>simple item 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

let dnl = new DraggableNestableList("#myList");

---

This awesome jQuery plugin is developed by HusnainTaj. For more Advanced Usages, please check the demo page or visit the official website.