How to make use of it:

1. Just load the next information within the doc and the draganddrop.js library is prepared to be used.

<link href="draganddrop.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="draganddrop.js"></script>

2. Enable the draggable performance on a DOM component you specify.

<div class="element">
  ...
</div>

$('.element').draggable();

3. Enable the sortable and draggable functionalities on an HTML checklist.

<ul class="demo">
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2
        <ul>
          <li>Item 2.2.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
    </ul>
  </li>
</ul>

$('.demo').draggable();
$('.demo').sortable();

4. Possible choices to customize the sortable performance.

$('.demo').sortable({
  handle: false, // handle selector
  container: container_type,
  container_type: container_type,
  same_depth: false,
  nodes: node_type,
  nodes_type: node_type,
  placeholder_class: null,
  auto_container_class: 'sortable_container',
  autocreate: false, // creates nested containers within nodes
  group: false, // is grouped
  scroll: false, // is scrolled
  update: null // callback
});

5. Possible choices to customize the draggable performance.

$('.demo').draggable({
  handle: false,
  delegate: false, // selector of delegate element
  revert: false,
  placeholder: false,
  droptarget: false,
  container: false,
  scroll: false,
  //callbacks
  update: null,
  drop: null
});

6. API strategies.

// disable the Draggable functionality
$('#drag').draggable('destroy');

// returns an object representing the structure of the nested list
$('#list').sortable('serialize');

// disable the Sortable functionality
$('#list').sortable('destroy');

Mobile-friendly Drag And Drop Plugin, Drag and Drop Github, jquery drag and drop list, best drag and drop plugin jquery

See Demo And Download