yjxf8285@qq.com

HTML5 Sortable – jQuery拖放排序插件使用方法

爱前端 Plugins/Tools HTML5 Sortable – jQuery拖放排序插件使用方法

Plugins/Tools

HTML5 Sortable – jQuery拖放排序插件使用方法

Posted By 刘晓帆 | 597 views

插件下载地址:http://liuxiaofan.com/download/html5sortable.tar.gz

特点

  • 很轻量,压缩后体积小于1KB
  • 基于HTML5原生的darg和dorp方法
  • 支持列表和网格风格布局2种布局
  • 文档类似于jQuery UI的sortable插件
  • 兼容IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+

如何使用?

基本的DOM结构和运行脚本。

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

使用了2种样式用于区别拖拽中.sortable-dragging和拖放占位.sortable-placeholder。

使用 sortupdate 事件,触发条件为排序发生了变化。

$('.sortable').sortable().bind('sortupdate', function() {
   //当用户的dom位置改变后和排序完成之后触发
});

使用items选项用来指定哪些项目可以被拖放

$('.sortable').sortable({
    items: ':not(.disabled)'
});

使用handle选项指定一个可拖拽的小把手

$('.sortable').sortable({
    handle: '.handle'
});

使用connectWith选项,创建一个有关联的列表

$('#sortable1, #sortable2').sortable({
    connectWith: '.connected'
});

销毁方法

$('.sortable').sortable('destroy');

使其无效化方法

$('.sortable').sortable('disable');

使其有效化方法

$('.sortable').sortable('enable');

Tagged

Comments are closed.