sortable
2017-05-13 17:55
113 查看
最近在找有关拖拽排序类的组件,实现在一个列表内及多个列表间的数据的拖拽排序。经比较最终选Sortable.js
(https://github.com/RubaXa/Sortable)
。
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)。
sortable其中具有很多的优点:
支持触屏设备和大部分浏览器
可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序
移动列表单元时有css动画
支持拖放操作和可选择的文本
非常友善的滚动效果
基于原生HTML5中的拖放API
支持多种框架(angular、vue、react等)
支持所有的css框架,像Bootstrap
简单的API,方便使用
不依赖jQuery
sortable通过配置参数实现拖拽拖拽排序,其中我认为最重要的几个参数是:
对于拖拽事件onAdd: function (evt) {…},onUpdate: function (evt) {…}等事件,其中参数evt中有被操作元素的属性,如newIndex(数字,表示新的位置),oldIndex(数字,表示之前的位置),item(被操作的对象)等。
下面是一个在angularjs的框架中的例子,代码就不在这里列了,具体的代码和效果可以在https://jsfiddle.net/luxiaobei/f8L35wet/1/中查看。
当然,sortable是一个比较轻量的拖拽排序组件,可以实现类似功能的更强大是jquery原生的组件,下次再跟大家分享吧。(^_^)谢谢!
(https://github.com/RubaXa/Sortable)
。
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)。
sortable其中具有很多的优点:
支持触屏设备和大部分浏览器
可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序
移动列表单元时有css动画
支持拖放操作和可选择的文本
非常友善的滚动效果
基于原生HTML5中的拖放API
支持多种框架(angular、vue、react等)
支持所有的css框架,像Bootstrap
简单的API,方便使用
不依赖jQuery
sortable通过配置参数实现拖拽拖拽排序,其中我认为最重要的几个参数是:
group: "name", // 分组的名字,同样的name可以互相拖动到对应列表排序 sort: true, // 默认为true,设置是否可以排序。 delay: 0, // 可以进行拖动的延迟时间 disabled: false, // 是否可以拖动排序 animation: 150, //动画时间 handle: ".my-handle", // 为列表中对象设置手柄,按住对象的拖动手柄才可以进行拖动 draggable: ".item", // 列表中哪些对象可以进行拖拽 ghostClass: "sortable-ghost", // 被拖动元素离开原来位置时原来位置的样式 dragClass: "sortable-drag", // 拖动是被操作的对象的样式
对于拖拽事件onAdd: function (evt) {…},onUpdate: function (evt) {…}等事件,其中参数evt中有被操作元素的属性,如newIndex(数字,表示新的位置),oldIndex(数字,表示之前的位置),item(被操作的对象)等。
下面是一个在angularjs的框架中的例子,代码就不在这里列了,具体的代码和效果可以在https://jsfiddle.net/luxiaobei/f8L35wet/1/中查看。
当然,sortable是一个比较轻量的拖拽排序组件,可以实现类似功能的更强大是jquery原生的组件,下次再跟大家分享吧。(^_^)谢谢!
相关文章推荐
- Sortable.create 说明
- jquery sortable ui
- javascript drag sortable 拖动效果
- 一个轻量级的jQuery拖拽排序插件 - HTML5 Sortable
- jqueyr sortable 参数详解
- sencha touch SortableList 的使用
- EasyUI + JQuery Sortable 实现可拖动工作台功能。
- remoteSort =true 用在store; 和sortable:true 用在column里的一个字段上
- jquery sortable实现table拖拽排序,更新时只更新受影响的行
- Windows Locale Codes - Sortable list(具体一个语言里还可具体细分,中国是2052,法国是1036)
- jquery sortable使用详解
- 拖拽排序插件sortable
- grails findAll paginate and sortablecolumn
- 类似igoogle和mybaidu的jquery sortable 插件
- jquery sortable 插件参数详解
- jQuery UI插件sortable中文帮助文档
- Ext列表展现--普通排序sortable--全局排序remoteSort
- jquery-ui 之Sortable详解
- jquery sortable的拖动方法示例详解
- 使用sortable插件实现列表中表项的拖曳排序操作8-3