使用sortablejs实现可拖动九宫格相册功能

最新推荐文章于 2024-08-29 19:32:17 发布

不懂前端的小韩

最新推荐文章于 2024-08-29 19:32:17 发布

阅读量314

点赞数 2

分类专栏： uni-app文章 vue专栏文章标签： javascript vue.js uni-app 前端

本文链接：https://blog.csdn.net/hanmeng0929/article/details/131723386

版权

uni-app文章同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue专栏

7 篇文章 0 订阅

订阅专栏

本文介绍了如何利用SortableJS库在Vue项目中创建一个可拖动排序的九宫格相册。首先，通过npm安装SortableJS依赖，然后在HTML结构中设置九宫格图片视图，并在Vue的mounted生命周期钩子中初始化SortableJS，实现图片项的拖放排序功能。当拖动结束时，更新数据源以反映新的排序顺序，确保视图更新。

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

提示：使用sortablejs实现可拖动九宫格相册功能

前言

使用sortablejs实现可拖动九宫格相册功能

一、效果图实现

在这里插入图片描述

二、代码实现

1.先安装依赖

代码如下（示例）：

npm i sortablejs -S

2.结构分析

代码如下（示例）：

<view class="cameraImg">
      <view v-for="(item, index) in fileList1" :key="index" class="data">
        <image :src="item.url" alt="" class="imgPic"></image>
      </view>
 </view>

//2. 在script里面导入一下，加入module="sortable" lang="renderjs"
<script module="sortable" lang="renderjs">
   import Sortable from "sortablejs";
</script>


 mounted () {
    this.initSortable();
  },

methods: {
    // 拖动
    initSortable() {
      this.el = document.querySelector('.cameraImg')
      this.sortable = Sortable.create(this.el, {
        sort: true, //是否可进行拖拽排序
        animation: 180, //动画时间
        // 允许被拖拽的类名
        draggable: '.data',
        onEnd: (evt) => {
          this.fileList1.splice(evt.newIndex, 0, this.fileList1.splice(evt.oldIndex, 1)[0])
          var newArray = this.fileList1.slice(0)
          this.fileList1 = [];// 必须有此步骤，不然拖拽后回弹
          this.$nextTick(function () {
             this.fileList1 = newArray;// 重新赋值，用新数据来刷新视图
          });
        },
      })
    },
  }