vue拖拽排序，横排竖排都行

首先要用什么插件还是得先下载
npm install vuedraggable
然后再用的地方引入
import draggable from 'vuedraggable'
注册组件
components: {
//调用组件
draggable,
},
在附一个参考网址（我这只是本人笔记使用，专业还是看这个网址）
https://juejin.cn/post/6844904150350692366

废话不多说，直接上代码

<template>
  <div>
    <button @click="addL">添加</button>
    <!-- 调用组件  -->
    <draggable class="Cul" element="ul" :list="list" :animation='200'>
      <transition-group>
        <li class="Cli list-group-item" v-for="item in list" :key="item.id">{{item.name}}</li>
      </transition-group>
    </draggable>
    <!-- 输出 list 数据 -->
    {{list}}
  </div>
</template>

<script>
// 引入拖拽组件
import draggable from 'vuedraggable'
import url from "../../common/api";
export default {
  name: 'demo',
  components: {
    //调用组件
    draggable,
  },
  data () {
    return {
      list:[
        {
          id: 1,
          name: '1'
        },
        {
          id: 2,
          name: '2'
        },
        {
          id: 3,
          name: '3'
        },
        {
          id: 4,
          name: '4'
        },
        {
          id: 5,
          name: '5'
        },
        {
          id: 6,
          name: '6'
        },
        {
          id: 7,
          name: '7'
        },
        {
          id: 8,
          name: '8'
        },
      ]
    }
  },
  methods:{
    addL(){
      this.list.push({
        id:new Date().getTime(),
        name:9
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
.Cul{
  background #f00
  width 500px
}
.Cli{
  background #00f
  display inline-block
  width 50px
  margin 16px
  color #fff
}
</style>