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

最新推荐文章于 2024-08-07 16:40:14 发布

张帅涛_666

最新推荐文章于 2024-08-07 16:40:14 发布

阅读量2k

点赞数 1

文章标签： vue.js javascript html

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

版权

本文展示了如何在Vue项目中利用vuedraggable组件实现列表内的按钮元素上下拖拽以重新排列。通过引入组件、定义数据和监听更新事件，可以轻松创建动态可拖拽排序的按钮列表。参考文档：http://www.itxst.com/vue-draggable/yvq3mifz.html

摘要由CSDN通过智能技术生成

fm:
首先

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>