js和vue拖拽元素

---------pc:
    <div
        class="imgRow"
        draggable="true"
        @dragstart="handleDragStart($event, item)"
        @dragover.prevent="handleDragOver($event, item)"
        @dragenter="handleDragEnter($event, item)"
        @dragend="handleDragEnd($event, item)"
        v-for="(item, index) in imgList"
        :key="item.name"
      >

    // 拖动图片
    handleDragStart(e, items) {    
      this.dragging = items; //开始拖动时，暂时保存当前拖动的数据。
    },
    handleDragEnd(e, items) {
      this.dragging = null; //拖动结束后，清除数据
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move"; //在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e, items) {
      e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件
      if (items == this.dragging) return;
      const newItems = [...this.imgList]; //拷贝一份数据进行交换操作。
      const src = newItems.indexOf(this.dragging); //获取数组下标
      const dst = newItems.indexOf(items);
      newItems.splice(dst, 0, ...newItems.splice(src, 1)); //交换位置
      this.imgList = newItems;
    },

------------------移动端
------------------文档：https://www.itxst.com/vue-draggable/zyrqie7f.html
//导入draggable组件
import Draggable from "vuedraggable";
components: { Draggable },

      <Draggable
        class="moveDraggable"
        v-model="imgList"
        group="itxst"
        @start="start"
        animation="300"
      >
        <transition-group>
          <div class="imgRow" v-for="(item, index) in imgList" :key="item.name">
            <img
              :src="require(`@/assets/img/interact/${item.url}.png`)"
              alt=""
              @click="lookImg"
            />
            <!-- 删除 -->
            <div class="delImg" @click="delImg(item.name)"></div>
            <!-- 封面 -->
            <div class="imgCover" v-show="index === 0">封面</div>
          </div>
        </transition-group>
      </Draggable>