HTML5 Sortable
HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.
Because it's better.
Well, If you want to read the whole story read it here.
Download it from here.
Then use it like this:
Use
Use
Use
Use
Use
To remove the sortable functionality completely:
To disable the sortable temporarily:
To enable a disabled sortable:
The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers:
HTML5 Sortable is released under the MIT license.
Why another sortable plugin?
Features
How to use it?
<ul class="sortable">
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
</ul>
<script src="jquery.sortable.js"></script>
<script>
$('.sortable').sortable();
</script>
.sortable-dragging
and .sortable-placeholder
selectors to change the styles of a dragging item and its placeholder respectively.
sortupdate
event if you want to do something when the order changes (e.g. storing the new order):
$('.sortable').sortable().bind('sortupdate', function() {
//Triggered when the user stopped sorting and the DOM position has changed.
});
items
option to specifiy which items inside the element should be sortable.
$('.sortable').sortable({
items: ':not(.disabled)'
});
handle
option to create sortable lists with handles:
$('.sortable').sortable({
handle: '.handle'
});
connectWith
option to create connected lists:
$('#sortable1, #sortable2').sortable({
connectWith: '.connected'
});
$('.sortable').sortable('destroy');
$('.sortable').sortable('disable');
$('.sortable').sortable('enable');
yepnope({
test: Modernizr.draganddrop,
yep: 'jquery.sortable.js',
nope: 'jquery-ui.min.js',
complete: function() {
$('.sortable').sortable().bind('sortupdate', function() {
//Store the new order.
}
}
});
Demos
Sortable List
Sortable Grid
Sortable List With Disabled Items
Sortable List With Handles
Connected Sortable Lists
License