vue 图片拖拽排序，并获得拖拽后的数据

最新推荐文章于 2024-07-11 15:54:00 发布

wieyi

最新推荐文章于 2024-07-11 15:54:00 发布

阅读量1.2k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wieyi/article/details/125487892

版权

Vue.js vuedraggable 拖拽排序数组操作前端开发

关键词由CSDN通过智能技术生成

1.安装插件

npm i -s vuedraggable

2. 使用插件

import Draggable from 'vuedraggable'

components: { Draggable },

<draggable v-model="checkArr" filter=".forbid" animation="300" :move="onMove" @end="dragend"
                @sort="handleSortChange">
                <transition-group>
                  <div v-for="(item, index) in checkArr" :key="item.id">
                    <div class="img-item">
                      <img class="icons" :src="item.path_url" />
                      <el-image style="width: 100px; height: 100px" :src="item.path_url" fit="cover"></el-image>
                    </div>
                  </div>
                </transition-group>
              </draggable>

sort方法

handleSortChange(val) {
        const targetRow = this.checkArr.splice(val.oldIndex, 1)[0] // 获取第一条数据
        this.checkArr.splice(val.newIndex, 0, targetRow)
        // 将数组进行深拷贝，置空后重新赋值给数组
        let newArr = this.checkArr.splice(0)
        this.checkArr = [] // 置空
        this.checkArr = newArr
        // this.$nextTick(() => {
        //   this.checkArr = newArr
        //   // this.$set(this, 'checkArr', newArr)
        // })
        console.log(this.checkArr)
      },