jQuery Plugin For Creating Sortable Elements - jsortable
File Size: | 44.4 KB |
---|---|
Views Total: | 1865 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.