function useDrag() {
  const refEl = Vue.shallowRef(null);
  const drag = Vue.ref(null);
  const handleMouseDown = (e) => {
    const { clientX, clientY } = e;
    const { left, top } = e.target.getBoundingClientRect();
    const shiftX = clientX - left;
    const shiftY = clientY - top;
    const handleMouseMove = (e) => {
      drag.value = { left: clientX - shiftX, top: clientY - shiftY, offsetLeft: e.clientX - clientX, offsetTop: e.clientY - clientY };
    }
    const handleMouseUp = (e) => {
      drag.value = { left: clientX - shiftX, top: clientY - shiftY, offsetLeft: e.clientX - clientX, offsetTop: e.clientY - clientY };
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      e.target.style.userSelect = '';
    }

    e.target.style.userSelect = 'none';
    drag.value = { left: clientX - shiftX, top: clientY - shiftY, offsetLeft: 0, offsetTop: 0 };
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  }
  Vue.watch(refEl, (cur, pre) => {
    if (cur instanceof HTMLElement) {
      cur.addEventListener('mousedown', handleMouseDown);
    }
    if (pre instanceof HTMLElement) {
      // 处理过期的el
      pre.removeEventListener(handleMouseDown)
    }
  })

  refEl.value = 1;

  return { refEl, drag }
}