如效果图，很不错的拖拽组件：

安装引入

// npm i -S vuedraggable	安装
import draggable from "vuedraggable"

HTML

<template>
	<div>
		<draggable
             delay="100"
             :options="{animation:150}"
             :no-transition-on-drag="true"
             @change="change"
             @start="start"
             @end="end"
             :move="move"
             v-model="list"
        >
        	<div v-for="item in list" :key="item">{{item}}</div>
        </draggable>
	</div>
</template>

js

export default {
	data() {
        return {
            list:[1,2,3,4,5,34,54], // 拖动数据
        }
    },
    components: {
		draggable
	},
    methods: {
        //evt里面有两个值，一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
        change(evt) {
            // console.log(evt , 'change...')
        },
        //start ,end ,add,update, sort, remove 得到的都差不多
        start(evt) {
            // console.log(evt , 'start...')
        },
        end(evt) {
        	// 拖动后其实list里面数据排序已经被改变
        	// console.log(this.list,'拖动后数据')
            // console.log(evt , 'end....')
            evt.item //可以知道拖动的本身
            evt.to    // 可以知道拖动的目标列表
            evt.from  // 可以知道之前的列表
            evt.oldIndex  // 可以知道拖动前的位置
            evt.newIndex  // 可以知道拖动后的位置
        },
        move(evt, originalEvent) {
            // console.log(evt , 'move')
            // console.log(originalEvent) //鼠标位置
        }
    },
}

更多参数，中文官网：链接: http://www.itxst.com/vue-draggable/tutorial.html