vue 原生drag拖动元素与拖动排序

<template>
  <div class="videoBox">
    <div class="mr20">
      <div v-for="(item, index) in videoList" :key="index">
        <div v-if="item.drag" class="name" @dragstart="dragstart(item)" draggable="true">{{ item.name }}</div>
        <div v-else class="unName" draggable="false">{{ item.name }}</div>
      </div>
    </div>

    <div draggable="false" class="content" @dragenter="ondragenter($event)" @dragover="ondragover($event)" @drop="ondrop($event, dragstartItem)">
      <div v-for="(item, index) in boxList" :key="index" class="conBox"  :draggable="true" @dragstart="sonDragstart(item)" @dragenter="sonDragenter(item)" @dragend="sonDragend(item)">
        <div class="conTit">
          <span>{{ item.name }}</span>
          <div class="icon" @click="del(index)">
            <i class="el-icon-circle-close"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      videoList: [
        {
          name: "01",
          drag: true,
          url: '@/assets/PV.mp4'
        },
        {
          name: "02",
          drag: true,
          url: '../assets/PV.mp4'
        },
        {
          name: "03",
          drag: true,
          url: require('@/assets/PV.mp4')
        },
        {
          name: "04",
          drag: true,
          url: require('../assets/PV.mp4')
        },
      ],
      boxList: [],
      dragstartItem: {},
      moveVal: ''
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 数据开始拖动
    dragstart(item) {
      item.sort = false // 判断是排序还是新增
      this.dragstartItem = JSON.parse(JSON.stringify(item)) // 获取列表中拖动的数据
    },
    // 鼠标进入当前dom
    ondragenter(e) {
      e = e || event;
      if (e.preventDefault){
        e.preventDefault();
      } else {
        e.returnValue = false;
      }
    },
    // 鼠标在当前dom中移动
    ondragover(e) {
      e = e || event;
      if (e.preventDefault){
        e.preventDefault();
      } else {
        e.returnValue = false;
      }
    },
    // 拖动放下
    ondrop(e, val) {
      if (JSON.stringify(val) !== '{}' && !val.sort) {
        val.sort = false
        this.boxList.push(val)
        this.dragstartItem = {}
      }
    },
    // 排序拖拽开始
    sonDragstart(item) {
      item.sort = true
      if (this.boxList.length > 0) {
        this.boxList.forEach(items => {
          items.sort = true
        })
      }
    },
    // 排序进入拖放区域
    sonDragenter(item) {
      this.moveVal = item;
    },
    // 拖拽结束排序
    sonDragend(item) {
      if (item.sort) {
        item.sort = false
        let moveObj = this.moveVal ? this.moveVal : '';
        let index = this.boxList.indexOf(item); // 移动元素的当前位置
        let addIndex = this.boxList.indexOf(moveObj); // 要移动后的位置
        this.boxList.splice(index, 1);
        this.boxList.splice(addIndex, 0, item);
        this.moveVal = ''
      }
    },
    // 删除
    del(index) {
      this.boxList.splice(index, 1);
    }
  },
};
</script>
    
<style scoped lang="less">
.videoBox {
  display: flex;
  padding: 20px;
  .name {
    width: 100px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #1f88d9;
    color: #1f88d9;
    background: #fff;
    cursor: move;
    user-select: none;
  }
  .unName {
    width: 100px;
    padding: 10px;
    margin: 10px 0;
    background: #ccc;
    user-select: none;
  }
  .content {
    width: 400px;
    height: 200px;
    border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    .conBox {
      width: 49%;
      height: 48%;
      background: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .conTit {
        width: 100%;
        height: 100%;
        .icon {
          position: absolute;
          top: 0px;
          right: 0px;
          cursor: pointer;
        }
      }
    }
  }
  .mr20 {
    margin-right: 20px;
  }
}
</style>