IT小书童 - 为程序员提供优质教程和文档

sortable.js sort属性是否允许组内排序，注意这并不是不允许拖动而是是否允许排序，比如有多组时，sort设置了false,a组可以拖动到b组，但是不能在a组内拖动排序。

sortable.js 多组间相互拖动排序，从a组拖动元素到b组或从a组克隆元素到b组。group是多组之间相互拖拽最重要的属性，下面为group属性的说明。

比如我们有一个文章列表，我们可以设置文章排序字段数字大小然后ajax刷选数据进行排序，这种方法比较简单但是用户体验不好，本章节将通过sortable.js对表格进行排序实现更好的用户体验。

vue的ag-grid插入数据新增行比传统版简单得多，只需要往数组里插入一行即可实现。

本章节演示如果通过ag-grid vue来全选反选并获取选中数据，实现这些功能也是通过ag-grid的api实现，如果需要了解其他API可以点击本教程的非VUE菜单查看具体用法。

上一篇讲解了ag-grid vue在vscode和webpack环境中的用法，那么本篇将介绍ag-grid vue umd浏览器直接引入js版用法，需要注意的是注册注册ag-grid-vue组件，注册成功了用法就和webpack差不多了。

ag-grid是一款极其优秀的表格插件几乎能满足你所有的需求，本文将介绍ag-grid vue的使用方法，包括如何安装开发环境、如何注册组件、如何初始化数据获取选中数据及对应的事件。

vue.draggable拖拽时会触发各种事件，比如start, add, remove, update, end, choose, unchoose, sort, clone事件，本文将列出vue.draggable的全部事件。

vue.draggable ghostClass 目标位置占位符的样式及需要停靠位置的样式。

通过vue.draggable的chosenClass属性设置选中元素的样式，可以通过自定义样式来方便的区分出那个元素被选中。

vue.draggable start开始拖动时的事件。

vue.draggable add 从A组拖动到B组完成的事件,当当前网页只有一页时不会触发该事件。

vue.draggable scroll属性容器有滚动条时是否允许滚动及当父容器元素有滚动条时是否允许拖动。

vue.draggable move 自定义控制那些元素可以拖拽或不允许拖拽，实际业务场景往往会比较复杂，往往在拖拽过程中才能知道那些元素允许停靠，点击时才知道那些元素是否允许拖拽。

vue.draggable的clone拷贝实现常用菜单功能，从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。

如果你想设置某个元素或对象不允许拖动拖拽把这些元素的样式名称设置到filter属性即可，本文将实现包含forbid样式的元素将无法拖动,第一行无法拖动,也无法拖动到第一行。

当鼠标落在handle指定的元素上面时才允许拖动，如下面的例子只能点击加号区域才能拖动，点击其他区域则无法拖动。

通过animation属性设置vue.draggable过渡效果，这样拖动时过渡位置就不会显的太生硬。

通过disabled属性实现开启或禁用vue.draggable的拖拽效果。

ITXST.COM 为程序员提供优质教程和文档