- Sortable
- lists
- in
- a
- jiffy!
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.