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

提示：使用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;// 重新赋值，用新数据来刷新视图
          });
        },
      })
    },
  }

---