vue+ts realizes the effect of element mouse drag

// clientX is the x-axis coordinate of the mouse relative to the upper left corner of the browser; it does not change with the scroll bar;
// clientY The coordinate of the mouse on the y-axis relative to the upper left corner of the browser; does not change with the scroll bar;
// element.offsetTop refers to the distance between element and the upper or upper control, integer, unit pixel.
// element.offsetLeft refers to the position of element from the left or upper control, integer, unit pixel.
// element.offsetWidth refers to the width of the element control itself, integer, unit pixel.
// element.offsetHeight refers to the height of the element control itself, integer, unit pixel.
// clientHeigh = height + top and bottom padding
// clientWidth = width + left and right padding

<template>
  <div class="to-do-list" ref="parentBox">
    <div class="search-title">
      <h1 class="add-bold left-box" style="margin-left:35px">
        <a-icon type="unordered-list" style="margin-right: 10px;" />Element drag</h1>
    </div>
    <a-button ref="moveBtn" style="width: 100px;height: 40px;transition:none" class="move-btn" type="primary"
      >Drag button</a-button
    >
  </div>
</template>

<script lang="ts">
import { Component, Emit, Inject, Prop, Ref, Vue, Watch } from 'vue-property-decorator';

@Component({
  components: {},
})
export default class BriberyInformation extends Vue {
  @Ref() readonly moveBtn;
  @Ref() readonly parentBox;

  btnDown() {
    let box = this.moveBtn.$el; //Get the button's box DOM element let parentBox = this.parentBox; //Get the button's parent DOM element let parentH = parentBox.clientHeight; //Get the height of the button's parent element
    let parentW = parentBox.clientWidth; //Get the width of the button parent element

    let x, y;
    let moveX, moveY; //moving distancelet maxX, maxY; //maximum moving distancelet isDrop = false;

    box.onmousedown = e => {
      x = e.clientX - box.offsetLeft; // e.clientX mouse coordinate relative to the x-axis of the upper left corner of the browser - the position of the button upper control y = e.clientY - box.offsetTop;
      isDrop = true;
    };
    document.onmousemove = e => {
      if (isDrop) {
        e.preventDefault();
        moveX = e.clientX - x; //Get the moving distance from the left side moveY = e.clientY - y; //Get the moving distance from the top //Maximum movable distance maxX = parentW - box.offsetWidth;
        maxY = parentH - box.offsetHeight;

        //Calculation of effective moving distance //console.log(Math.min(-1, 4, 6, 12)); //Output -1-----Multiple parameters, return the minimum value moveX = Math.min(maxX, Math.max(0, moveX));

        moveY = Math.min(maxY, Math.max(0, moveY));
        box.style.left = moveX + 'px';
        box.style.top = moveY + 'px';
      } else {
        return;
      }
    };
    document.onmouseup = e => {
      e.preventDefault();
      isDrop = false;
    };
  }

  mounted() {
    this.btnDown();
  }
}
</script>
<style scoped lang="less">
.to-do-list {
  position: relative;
  min-height: 600px;
  max-height: 600px;
  width: 600px;
  overflow: hidden;
  border: 2px solid black;
  .move-btn {
    position: absolute;
  }
}
</style>