vue拖拽vuedraggable实现拖拽排序

1、使用cmd命令在项目根目录下下载安装vuedraggable

// npm安装
npm i vuedraggable -S
// cnpm安装
cnpm i vuedraggable -S

2、在组件中需要使用的引入，并注册组件

// 导入
import draggable from 'vuedraggable'
// 注册
components: { draggable }

3、使用

// html
<draggable v-model="draggableList" element="ul" @update="onDatadragChange">
  <li v-for="(item, index) in draggableList" :key="index" class="item">
    {{ item.name }}
  </li>
</draggable>

完整代码

<template>
  <draggable v-model="draggableList" element="ul" @update="onDatadragChange">
    <li v-for="(item, index) in draggableList" :key="index" class="item">
      {{ item.name }}
    </li>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'Vuedraggable',
  components: { draggable },
  data() {
    return {
      draggableList: [
        { id: 1, name: '自定义1' },
        { id: 2, name: '自定义2' },
        { id: 3, name: '自定义3' },
        { id: 4, name: '自定义4' },
        { id: 5, name: '自定义5' },
        { id: 6, name: '自定义6' }
      ]
    }
  },
  methods: {
    // 监听拖拽改变
    onDatadragChange(val) {
      console.log(val)
    }
  }
}
</script>

<style scoped>
.item {
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
  text-align: center;
  color: #fff;
  background-color: #B1B1B1;
  border-radius: 3px;
}
</style>

一个简单的vue拖拽就完成啦，快去试试吧