Easy Draggable & Reorderable jQuery Plugin - dragSort.js

dragSort.js is an easy-to-use jQuery plugin that enables users to reorder items in a specific container via drag and drop.

Not only HTML lists, the plugin supports almost all HTML elements like tables, DIVs, description lists, form fields, and anything you can imagine.

More Features:

• Allows you to drag items between several lists.
• Custom placeholder template.
• Allows you to ignore elements.
• Auto-scrolls the page/container when the item is dragged outside of the list.

How to use it:

1. To get started, include the jquery.dragsort.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.dragsort.js"></script>

2. Create a sortable HTML list.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

$("ul").dragsort({ 
  dragSelector: "li", 
  placeHolderTemplate: "<li></li>" 
});

3. The example shows how to create a sortable table, which enables users to reorder table rows via drag and drop.

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

$("tbody").dragsort({ 
  dragSelector: "tr", 
  placeHolderTemplate: "<tr></tr>" 
});

4. All possible plugin options.

$("tbody").dragsort({ 

  // item selector
  itemSelector: "",

  // selector of drag handle
  dragSelector: "",

  // exclude elements
  dragSelectorExclude: "input, textarea",

  // callback function
  dragEnd: function() { },

  // allows you to drag items between lists
  dragBetween: false,

  // placeholder template
  placeHolderTemplate: "",

  // scroll container
  scrollContainer: window,

  // animation speed
  scrollSpeed: 5,

});

---

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