vue拖拽排序插件vuedraggable使用方法详解

一、在vue项目中，用npm包下载下来

npm install vuedraggable -S

二、下载下来后，引入插件，在你的vue文件的script标签里面这样引入

import draggable from 'vuedraggable'

三、注册组件

components: {
 draggable
},

四、在template标签里面使用

<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
   <transition-group>
    <div v-for="element in colors" :key="element.text" class = "drag-item">
     {{element.text}}
    </div>
   </transition-group>
 </draggable>

更多详情可阅读vue.draggable中文文档
http://www.itxst.com/vue-draggable/tutorial.html