Yet another sortable list plugin for jQuery. touch-sortable.js is a tiny ( ~800 bytes minfied and gziped) purpose driven library that helps to create animated sortable lists in a jiffy. Supports both mouse and touch events.
#####http://docubuzz.github.io/touch-sortable.js
Include the touch-sortable script after the jQuery library.
<script src="/path/to/touch-sortable.js"></script>
Execute it against a ul element.
$(".sortable").sortable();
Use the onComplete event to know when reordering is completed. Callback returns the li element that was reordered.
$(".sortable").sortable({
onComplete: function(ul){
// Put your code here!
}
});
Currently, touch-sortable.js provides support for unordered lists. Define your list as shown. Check out a working example on our demo page.
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script src="jquery.sortable.js"></script>
<script>
$('.sortable').sortable();
</script>
An element being dragged around has the class inMotion - which can be used to style in css. Touch-sortable.js assumes elements in list are all the same height.
li {
display:block; padding:10px; margin:5px 0; background:#eee;
}
li.inMotion {
box-shadow:0 1px 3px rgba(0,0,0,.3);
}
Any feedback to make this plugin better is welcomed!
If you have any pull requests/bug reports, raise them up in the Pull Requests, or Issues.
We use the Closure Compiler Service, @compilation_level SIMPLE_OPTIMIZATIONS for our minified version. If you have a pull request, kindly minify your changes as well to help us out!
Released under the MIT license.