touch-sortable.js

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.

Usage

<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>
					

Currently, touch-sortable.js provides support for unordered lists. Define your list as shown.

Installation

<script src="/path/to/touch-sortable.js"></script>

Include the touch-sortable script after the jQuery library.

$(".sortable").sortable();

Execute it against a ul element.

$(".sortable").sortable({
	onComplete: function(ul){ 
	  // Put your code here! 
	} 
});
						

Use the onComplete event to know when reordering is completed. Callback returns the li element that was reordered.

Styling

li {
    display:block; padding:10px; margin:5px 0; background:#eee;
}
li.inMotion {
    box-shadow:0 1px 3px rgba(0,0,0,.3);
}
						

An element being dragged around has the class "inMotion" - which can be used to style in CSS.

Authors

Jeremy Huang

Email: jieyanhuang@gmail.com

Github: https://github.com/jieyanhuang

Ashish Puliyel

Email: ashish@puliyel.com

Github: https://github.com/ashishpuliyel