可拖动的div(vue3.0+ts的写法)

// 可拖动的前提是 定位必须是fixed 或者absolute
<div ref="box" @mouseenter="mouseenter"  @mousedown="mouseStaus = true"  @mouseleave="mouseLeave" @mouseup="mouseStaus = false">在线<br>交流</div>

step(){
	const state: any = reactive({
		box:ref(''),
		mouseX:0,
		mouseY:0,
		mouseStaus:false
	})
}
const mouseenter = (e:any) => {
	// 获取鼠标进入时距离div的左边距和上边距（mouseX,mouseY)
	 state.mouseX = e.clientX - state.box.offsetLeft
	 （鼠标进入时鼠标的left - 元素的left）
      state.mouseX = e.clientY - state.box.offsetTop
      (鼠标进入时鼠标的top- 元素的top)
}
const mouseLeave = (e:any)=>{
	  let a = window.innerWidth - 76;//(76:元素的宽)
      let b = window.innerHeight - 94//(94:元素的高)
      let x = e.clientX - statemouseX
      let y = e.clientY - state.mouseY
      if(x > a) {
        x = a
      } else if(x<0) {
        x = 0
      }
      if(y>b) {
        y = b
      } else if(y<64) {    // 64 是距离顶部的位置 可以为任意>0的数
        y = 64
      }
      //跟随鼠标移动
      if(state.moveStatus == true) {
        state.box.style.left = x + 'px'
        state.box.style.top = y + 'px'
        state.mouseStaus = false
      }
}