Simplest Drag To Sort Plugin For jQuery - drag-sort

File Size: 5.92 KB
Views Total: 3972
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simplest Drag To Sort Plugin For jQuery - drag-sort

The simplest jQuery drag to sort plugin which enables the drag'n'drop re-sort functionality on the list view. Without any 3rd dependencies such as jQuery UI.

How to use it:

1. Create a normal html list as this:

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

2. Download and include the drag-sort.js script along with the latest jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="drag-sort.js"></script>

3. Call the function on the html list to enable the drag to sort functionality.

$('#wrap').dragSort();

4. Customize the default CSS styles while dragging and sorting.

$('#wrap').dragSort({
  replaceStyle: {
    'background-color': '#f9f9f9',
    'border': '1px dashed #ddd'
  },
  dragStyle: {
    'position': 'fixed',
    'box-shadow': '10px 10px 20px 0 #eee'
  }
});

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