js实现拖拽移动

 
<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.btn()
  },
  methods: {
    btn () {
      const imgs = document.querySelectorAll('.img')
      const main = document.querySelector('#main')
      const zw = document.querySelector('.zw')
      const isMobile = navigator.userAgent.match(/Mobile/)
      let isDrag = false
      let index
      let py = {
        left: 0,
        top: 0
      }
      const move = (el, x, y) => {
        el.setAttribute('style', `pointer-events:none;position:absolute;left:${x}px;top:${y}px`)
      }
      document.addEventListener(isMobile ? 'touchstart' : 'mousedown', e => {
        isMobile && (e = e.touches[0])
        index = e.target.dataset.index
        if (index && !isDrag) {
          py.left = e.pageX - imgs[index].offsetLeft
          py.top = e.pageY - imgs[index].offsetTop
          zw.style.display = 'block'
          main.insertBefore(zw, imgs[index])
          move(imgs[index], e.pageX - py.left, e.pageY - py.top)
        }
        isDrag = true
      })
      document.addEventListener(isMobile ? 'touchmove' : 'mousemove', e => {
        isMobile && (e = e.touches[0])
        if (isDrag && index) {
          move(imgs[index], e.pageX - py.left, e.pageY - py.top)
        }
      })
      document.addEventListener(isMobile ? 'touchend' : 'mouseup', e => {
        isDrag = false
        zw.style.display = ''
        if (imgs[index]) {
          imgs[index].setAttribute('style', '')
          main.insertBefore(imgs[index], zw)
        }
      })
      imgs.forEach(v => {
        v.addEventListener(isMobile ? 'touchmove' : 'mouseenter', e => {
          isMobile && (e = e.touches[0])
          if (isDrag) {
            const list = [...main.children]
            const imgIndex = list.findIndex(el => v == el)
            const zwIndex = list.findIndex(el => zw == el)
            if (zwIndex < imgIndex) {
              main.insertBefore(v, zw)
            } else {
              main.insertBefore(zw, v)
            }
          }
        })
      })
    }
  }
}
script>
 
<style>
#main {
  display: flex;
  justify-content: space-evenly;
  width: 1020px;
  margin: 40px auto 0;
}
 
.img {
  width: 100px;
  user-select: none;
  height: 100px;
  background: no-repeat center center;
  background-size: cover;
  border: 1px solid black;
}
.bg1 {
  background-image: url('https://cdn.pixabay.com/photo/2020/02/05/22/01/bush-4822500__480.jpg');
}
 
.bg2 {
  background-image: url('https://cdn.pixabay.com/photo/2022/01/24/13/51/temple-6963458__480.jpg');
}
 
.bg3 {
  background-image: url('https://cdn.pixabay.com/photo/2020/12/02/01/06/chipmunk-5795916__480.jpg');
}
.bg4 {
  background-image: url('https://img0.baidu.com/it/u=3488728512,3798628168&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500');
}
.bg5 {
  background-image: url('https://img1.baidu.com/it/u=2837573517,2587904370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750');
}
.bg6 {
  background-image: url('https://img0.baidu.com/it/u=3647457944,660791411&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750');
}
.zw {
  width: 100px;
  height: 100px;
  display: none;
}
style>