jQuery Plugin For Creating Sortable Elements - jsortable

jsortable is a lightweight (~5kb minified) jQuery plugin which allows items in a list to be sorted horizontally and vertically using drag and drop or touch swipe. The plugin relies on jquery.event.drag to provide drag and drop functionality.

How to use it:

1. Load jQuery library and other required resources in the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.event.drag-2.2.js"></script>

2. Load the jQuery jsortable plugin after you have loaded jQuery library.

<script src="js/jquery.jsortable.js"></script>

3. Create a item list to be sorted.

<div class="example">
  <div class="box">
      Item 1
  </div>
  <div class="box">
      Item 2
  </div>
  <div class="box">
      Item 3
  </div>
  <div class="box">
      Item 4
  </div>
</div>

4. Call the function on the top element.

$('.example').jsortable({
    sortable: '.box',
    /* More Options */
});

5. All default options.

sortable: '.box', // sortable elements
show_target_placeholder: true,
show_source_placeholder: false

6. The method to get sortable elements.

var $demo = $('.example');
$demo.jsortable('getElements');

7. The update event.

var $demo = $('.example');
$demo.on('jsortable_updated', function (event) {
    // do something
});

Changelog:

2019-06-08

• JS improvement

About Author:

Author: Oğuzhan Eroğlu

Website: http://oguzhaneroglu.com/projects/jsortable/

---

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