vue 拖拽

<template>
  <div class="square" ref="square">
    <div class="draggable" @mousedown="move">99999</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    move(evt) {
      let odiv = evt.target; // 获取目标元素

      let parentObj = evt.path[0];

      let parentPositionWidth = parentObj.style.width.split("p")[0] * 1;

      let parentPositionLeft = parentObj.style.left.split("p")[0] * 1;

      let parentPositionTop = parentObj.style.top.split("p")[0] * 1;

      let parentPositionHeight = parentObj.style.height.split("p")[0] * 1;

      let x = evt.clientX - odiv.offsetLeft;

      let y = evt.clientY - odiv.offsetTop;

      document.onmousemove = e => {
        let left = e.clientX - x;

        let top = e.clientY - y;
        parentObj.style.left = left + "px";
        parentObj.style.top = top + "px";
        // if (left <= -parentPositionLeft) {
        //   left = -parentPositionLeft;
        // }

        // if (top <= -parentPositionTop) {
        //   top = -parentPositionTop;
        // }

        // if (
        //   left >=
        //   this.drawingBoardWidth - odiv.offsetWidth - parentPositionLeft
        // ) {
        //   left = this.drawingBoardWidth - odiv.offsetWidth - parentPositionLeft;
        // }

        // if (
        //   top >=
        //   this.drawingBoardHeight - odiv.offsetHeight - parentPositionTop
        // ) {
        //   top = this.drawingBoardHeight - odiv.offsetHeight - parentPositionTop;
        // }

        //   parentObj.style.left = parentPositionLeft + left + "px";

        // parentObj.style.top = parentPositionTop + top + "px";
      };

      // 为了防止 火狐浏览器 拖拽阴影问题

      document.onmouseup = e => {
        document.onmousemove = null;

        document.onmouseup = null;
      };
    }
  }
};
</script>
<style >
.draggable {
  position: absolute;

  z-index: 1;
}
</style>