Vue.Draggable拖拽功能的配置使用方法       这篇文章主要为大家详细介绍了Vue.Draggable拖拽功能配置使用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue.Draggable拖拽功能的具体代码，供大家参考，具体内容如下

使用cmd命令在项目根目录下下载安装Vue.Draggable

npm install vuedraggable 

在组件中需要使用的引入

import draggable from 'vuedraggable' 

注册组件

components:{
 draggable

vue的template代码如

 draggable v-model="itemlis"
//开始移动方法
 :move="getdata" 
 @update="datadragEnd"
//参数配置 
 :options="{animation: 60,handle:'.drag-icon'}"
 transition-group 
 el-row v-for="(item,index) in itemlis" :key="item.id" 
 el-col :span="13" 
 div 
 i /i 
 el-checkbox v-model="item.checked" :value="item.id" /el-checkbox span {{}} /span 
 /div 
 /el-col 
 el-col :span="4" 
 div 
 span {{item.time}} /span 
 /div 
 /el-col 
 el-col :span="4" 

 el-dropdown-menu slot="dropdown" 
 el-dropdown-item :data-url="item.opUrl.removeUrl" @click.native="moveTo(item,$event)" 移动 /el-dropdown-item 
 el-dropdown-item :data-url="item.opUrl.copyUrl" @click.native="copyTo(item,$event)" 复制 /el-dropdown-item 
 el-dropdown-item @click.native="itemDel(index,$event)" :data-url="item.opUrl.delUrl" 删除 /el-dropdown-item 
 el-dropdown-item :data-url="item.opUrl.exportUrl" 导出 /el-dropdown-item 
 el-dropdown-item :data-url="item.opUrl.editName" @click.native="getEditDialog(item,$event)" 编辑 /el-dropdown-item 
 el-dropdown-item @click.native="getCodeDialog(item,$event)" 查看二维码 /el-dropdown-item 
 /el-dropdown-menu 
 /el-dropdown 
 /div 
 /div 
 /el-col 
 /el-row 
 /transition-group 
 /draggable 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。