Vue 拖拽组件（实现上下拖拽） vuedraggable

引入依赖

npm i -S vuedraggable

这样可以实现一列按钮之间 可以进行上下拖拽 重新排版

<template>
  <vuedraggable v-model="list">
    <transition-group>
      <div v-for="item in list" :key="item" class="item">
       <van-button>{{item}}</van-button>
      </div>
    </transition-group>
  </vuedraggable>
</template>

<script>
import vuedraggable from 'vuedraggable';

export default {
  name: 'home',
  components: {vuedraggable},
  props: {
  },
  data() {
    return {
      list: [1,2,34,4,54,5]
    }
  },
  updated() {
    console.log(this.list)
  },
  methods: {
  }
}
</script>

具体的方法参考中文文档 http://www.itxst.com/vue-draggable/yvq3mifz.html

原文链接：https://blog.csdn.net/weixin_45549016/article/details/113682146