Vue draggable 基本拖拽

一、下载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