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

昵    称:
验证码:

相关文档: