javascript拖拽移入

<template>
  <div id="app">
    <div class="div1" @mousedown.prevent="dragstart($event)"></div>
    <div class="div2" @mouseover.prevent="dragover"></div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      //必须是mousedown事件，否则document.onmousemove无法取消；
      //必须加pointerEvents为none，否则无法触发移入；
      dragstart(event) {
        let obj = event.target
        let elx = obj.offsetLeft;
        let ely = obj.offsetTop;
        let x = event.clientX;
        let y = event.clientY;

        document.onmousemove = function (ev) {
          obj.style.pointerEvents = "none"//鼠标事件穿透该元素
          obj.style.left = elx + (ev.clientX - x) + "px"
          obj.style.top = ely + (ev.clientY - y) + "px"
        }
        document.onmouseup = function (ev) {
          obj.style.pointerEvents = "auto"
          document.onmousemove = null
          document.onmouseup = null
        }
      },
      dragover() {
        console.log("拖拽移入")
      }
    }
  }
</script>

<style scoped>
  #app {
    margin: 100px;
    position: relative;
  }

  .div1 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    z-index: 1;
  }

  .div2 {
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    right: 0;
  }
</style>
<style>
  body {
    margin: 0;
  }
</style>