Mobile Compatible jQuery Drag & Drop Plugin - Nestable

Nestable is a jQuery plugin that provides a simple way to enable dragdrag and drop functionality on hierarchical data lists. Compatible with either the mouse or touch events. 

Basic usage:

1. Create a hierarchical data list using nested Html lists.

<div class="dd" id="nestable">
  <ol class="dd-list">
    <li class="dd-item" data-id="1">
      <div class="dd-handle">Item 1</div>
    </li>
    <li class="dd-item" data-id="2">
      <div class="dd-handle">Item 2</div>
      <ol class="dd-list">
        <li class="dd-item" data-id="3">
          <div class="dd-handle">Item 3</div>
        </li>
        <li class="dd-item" data-id="4">
          <div class="dd-handle">Item 4</div>
        </li>
        <li class="dd-item" data-id="5">
          <div class="dd-handle">Item 5</div>
          <ol class="dd-list">
            <li class="dd-item" data-id="6">
              <div class="dd-handle">Item 6</div>
            </li>
            <li class="dd-item" data-id="7">
              <div class="dd-handle">Item 7</div>
            </li>
            <li class="dd-item" data-id="8">
              <div class="dd-handle">Item 8</div>
            </li>
          </ol>
        </li>
        <li class="dd-item" data-id="9">
          <div class="dd-handle">Item 9</div>
        </li>
        <li class="dd-item" data-id="10">
          <div class="dd-handle">Item 10</div>
        </li>
      </ol>
    </li>
    <li class="dd-item" data-id="11">
      <div class="dd-handle">Item 11</div>
    </li>
    <li class="dd-item" data-id="12">
      <div class="dd-handle">Item 12</div>
    </li>
  </ol>
</div>

2. Load the jQuery Nestable plugin after jQuery library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.nestable.js"></script>

3. Call the function to enable the drag & drop functionality.

$('#nestable').nestable()

4. Options and defaults.

// CSS selectors
listNodeName    : 'ol',
itemNodeName    : 'li',
rootClass       : 'dd',
listClass       : 'dd-list',
itemClass       : 'dd-item',
dragClass       : 'dd-dragel',
handleClass     : 'dd-handle',
collapsedClass  : 'dd-collapsed',
placeClass      : 'dd-placeholder',
noDragClass     : 'dd-nodrag',
emptyClass      : 'dd-empty',

// list item expand button
expandBtnHTML   : '<button data-action="expand" type="button">Expand</button>',

// list item collapse button
collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',

// group ID to allow dragging between lists
group           : 0,

// number of levels an item can be nested
maxDepth        : 5,
threshold       : 20

---

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