File Size: 416KB
Total Views: 1654
Date Created:
Last Modified Date:
Official Website: Go to website
License:
Html5sortable is very simple and lightweight jQuery plugin that built using native HTML5 drag and drops API. Style of the elements are controlled with pure CSS so list or grid layout can be modified easily with the help of the CSS. Implement process of the plugin is very easy so it can be implemented easily without any extra coding knowledge.
Features:
- Easy to implement.
- Lightweight, less than 1KB (minified and gzipped).
- Can be modified the style easily with the help of CSS.
- Supports on all modern browser and devices.
- Supports both list and grid style layouts.
How to use it:
1. Include the Javascript jquery.sortable.min.js
at the bottom of the web page.
<script src="path/to/jquery.sortable.min.js"></script>
2. Add the basic HTML to the page.
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
3. Initialize the plugin and we’re ready to go.
$(function() {
$('.sortable').sortable();
});
Use sortupdate
event if you want to do something when the order changes (e.g. storing the new order):
$('.sortable').sortable().bind('sortupdate', function(e, ui) {
//ui.item contains the current dragged element.
//Triggered when the user stopped sorting and the DOM position has changed.
});
Use items
option to specifiy which items inside the element should be sortable:
$('.sortable').sortable({
items: ':not(.disabled)'
});
Use handle
option to restrict drag start to the specified element:
$('.sortable').sortable({
handle: 'h2'
});
Setting forcePlaceholderSize
option to true, forces the placeholder to have a height:
$('.sortable').sortable({
forcePlaceholderSize: true
});
Use connectWith
option to create connected lists:
$('#sortable1, #sortable2').sortable({
connectWith: '.connected'
});
To destroy
the sortable functionality completely:
$('.sortable').sortable('destroy');
To disable
the sortable temporarily:
$('.sortable').sortable('disable');
To enable
a disabled sortable:
$('.sortable').sortable('enable');