jQuery 排序插件:html5sortable
HTML5 Sortable 是一个 jQuery 插件,使用本地拖拽 API 来创建可排序的列表和网格。
特性:
-
小于 1KB (简化和压缩 )
-
使用本地的拖拽 API
-
支持列表和网格风格的布局
-
类似 jQuery-UI 可排序插件的 API 和功能
-
可以在 IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ 和 Opera 12+ 上使用
用法:
从这里下载 here,然后:
<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>
Use .sortable-dragging
and .sortable-placeholder
selectors to change the styles of a dragging item and its placeholder respectively.
Use 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. });
Use items
option to specifiy which items inside the element should be sortable.
$('.sortable').sortable({ items: ':not(.disabled)' });
Use handle
option to create sortable lists with handles:
$('.sortable').sortable({ handle: '.handle' });
Use connectWith
option to create connected lists:
$('#sortable1, #sortable2').sortable({ connectWith: '.connected' });
To remove the sortable functionality completely:
$('.sortable').sortable('destroy');
To disable the sortable temporarily:
$('.sortable').sortable('disable');
To enable a disabled sortable:
$('.sortable').sortable('enable');
The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers:
yepnope({ test: Modernizr.draganddrop, yep: 'jquery.sortable.js', nope: 'jquery-ui.min.js', complete: function() { $('.sortable').sortable().bind('sortupdate', function() { //Store the new order. } } });
项目主页:
http://www.open-open.com/lib/view/home/1387940465765