mpvue实现图片添加、删除、拖拽功能

这几天用mpvue做项目用到了图片拖拽功能这里简单记录一下，直接上代码！！！

1. 自定义组件

（1）在components目录下新建一个dragSort.Vue
（2）在需要用到的文件引用

import dragSort from '@/components/dragSort'

（3）在引用的文件里面注册

 components: {
   
   
    dragSort
  },

（4）使用

<drag-sort :imgSrcs="files" @change="onDragSortChange" />

2.counter目录

我是在我counter目录下的counter.Vue使用的！

  <!-- 图片上传 -->
      <div class="weui_text">图片上传</div>
      <div class="xlp_fy xlp_print">
        <div class="xlp_lb">
          <div class="weui-cells__title">
            <div class="weui-uploader__title">图片上传</div>
            <div class="weui-uploader__info">{
   
   {
   
   files.length}}/3</div>
          </div>
          <drag-sort :imgSrcs="files" @change="onDragSortChange" />
        </div>
      </div>

 data() {
   
   
    return {
   
   
      files: [],
      }

 methods: {
   
   
    // 图片
    onDragSortChange(data) {
   
   
      this.files = data
    },
    }

3.components目录

自定义组件dragSort.Vue

<template>
  <view class="wrapper">
    <movable-area class="movable-area">
      <movable-view
        v-for="(item, index) in imgSrcs"
        :key="index"
        class="wrapper-image"
        :style="{'z-index': currentTouchIndex==index ? 99 : 0}"
        :x="reallyPositons[index].x + 'rpx'"
        :y="reallyPositons[index].y + 'rpx'"
        direction="all"
        :animation="animation"
        :out-of-bounds="false"
        @change="_onImgMove"
        @touchend="_onTouchEnd"
        :data-index="index"
      >
        <image
          class="image"
          mode="aspectFill"
          :src="item"
          @click="_previewImage"
          :data-index="index"
          :data-images="imgSrcs"
        />
        <div
          class="delete-icon"
          @click="_removeOnePicture"
          :data-index="index"
        ></div>
      </movable-view>
      <movable-view
        v-if="imgSrcs.length < 6"
        class="add"
        :style="{'top':standardPositions[imgSrcs.length].y + 'rpx', 'left':standardPositions[imgSrcs.length].x + 'rpx'}"
        @click="_onTappedAddPicture"
      >
        <view class="line1"/>
        <view class="line2"/>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
const standardPositions = [
  //第一排
  {
   
   
    x: 0,
    y: 0
  },
  {
   
   
    x: 0 + 190 + 20,
    y: 0
  },
  {
   
   
    x: 0 + 190 + 20 + 190 + 20,
    y: 0
  },
  //第二排
  {
   
   
    x: 0,
    y: 0 + 190 + 20
  },
  {
   
   
    x: 0 + 190 + 20,
    y: 0 + 190 + 20
  },
  {
   
   
    x: 0 + 190 + 20 + 190 +