vue3实现拖拽图片切换图片位置

不会弄动态图，大概就是长按拖拽一张图片可以跟你想放到的位置进行切换

现在是2021年7月16号，我在用vue3，可是vue的很多插件还不支持vue3，例如：Vue.Draggable，所以没有办法手写了一个原生的，以后出了支持vue3的就可以不用这个了

<template>
  <div class="img-box" id="myBtn">
  	//  主要是把索引值记下来了  :id="i"
    <img :src="item" alt="" v-for="(item,i) in mainImagelist" :key="i" :id="i">
  </div>
  <div class="draggable">拖动可以调整三张图片顺序</div>
</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    
  },
  data () {
    return {
      mainImagelist: ['https://mdsp8.qhimg.com/t017641766efa02bb02.png','http://placehold.it/90x90/','http://placehold.it/91x91/']
    }
  },
  mounted () {
    let btn = document.getElementById('myBtn');
    let that = this
    this.addHandler(btn, 'dragstart', function (e) {
      btn.dragStartEle = that.getTarget(e);
    })
    this.addHandler(btn, 'dragover', function (e) {
      that.preventDefault(e);
      btn.dragEndEle = that.getTarget(e);
    }, false);
    this.addHandler(btn, 'dragenter', function (e) {
      that.preventDefault(e);
    }, false);
    this.addHandler(btn, 'drop', function (e) {
      let target = that.getTarget(e);
      that.preventDefault(e);
      // 拖动元素，放置目标
      if (btn.dragStartEle && target) {
        if (target.nodeName === 'IMG' && btn.dragStartEle.nodeName === 'IMG') {
          // 交换
          let startI = btn.dragStartEle.id
          let endI = btn.dragEndEle.id
          that.mainImagelist[startI] = btn.dragEndEle.src
          that.mainImagelist[endI] = btn.dragStartEle.src
        }
      }
    }, false);
  },
  methods: {
    addHandler (element, type, handler) {
      //  这里是兼容代码，不需要兼容的可以不加
      if (element.addEventListener) {
        element.addEventListener(type, handler, false);
      } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
      } else {
        element["on" + type] = handler;
      }
    },
    getTarget (event) {
      return event.target || event.srcElement;
    },
    preventDefault (event) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
    },
  }
})
</script>
<style scoped lang="scss">
.img-box {
  width: 400px;
  padding: 10px;
  border: 1px solid #D3D5E0;
  display: flex;
  justify-content: space-between;
  margin-left: 96px;
  img {
    width: 128px;
    height: 84px;
  }
}

.draggable {
  font-size: 12px;
  color: #626886;
  padding-top: 6px;
  padding-bottom: 24px;
  margin-left: 96px;
}
</style>

这直接可以用