一、下载draggable插件
npm install -S vuedraggable
二、引入、注册组件
文件内引入:
import draggable from 'vuedraggable'
注册
components: {draggable},
三、直接使用draggable
拖拽最基本的单独元素,包括Button,cards等,不能放在整个实体内。
v-bind="dragOptions" 可选绑定的配置
其中,:list="绑定值" 与 返回的数组一致
dragOptions进行了简单配置
animation:600 ;过度动画时长0.6秒
forceFallback:true ;默认false,忽略HTML5的拖拽行为,因为h5里有个属性也是可以拖动,自定义样式时,建议forceFallback设置为true,否则拖拽比较生硬
disabled:false;是否禁用拖拽组件,false
其他可自行参照官方文档