Reorder HTML List Using Drag And Drop - jQuery DragNDrop

DragNDrop is a jQuery plugin which allows you to reorder an HTML ordered (or unordered) list using drag and drop. Without the need of jQuery UI.

The plugin also provides a callback function which returns the dropped list items for further use.

How to use it:

1. Download and place the JavaScript jquery.dragndrop.js after jQuery library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="./jquery.dragndrop.js"></script>

2. Just call the function on your HTML list and the plugin will do the rest.

<ul class="demo">
  <li> List Item 1 </li>
  <li> List Item 2 </li>
  <li> List Item 3 </li>
  ...
</ul>

<ol class="demo">
  <li> List Item 1 </li>
  <li> List Item 2 </li>
  <li> List Item 3 </li>
  ...
</ol>

$(function(){
  $('.demo').dragndrop();
});

3. Get the list item you just dropped.

$(function(){
  $('.demo').dragndrop({
    onDrop: function( element, droppedElement ) {
      console.log( 'element dropped: ' );
      console.log( droppedElement );
    }
  });
});

4. Reset the position.

$('.demo').dragndrop('reset');

5. Disable/re-init the drag and drop functionality.

$('.demo').dragndrop('unload');
$('.demo').dragndrop('reload');

Changelog:

2021-11-09

• Fixed Drag & Drop on mobile

---

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