最近專案裡常常使用拖拽改變元素位置或者大小的需求，cv法檔案找的腦闊疼，索性試試寫一個指令。
說起指令，提一嘴，vue3沒有了根元素唯一的限制後，彷彿指令繫結在元件上就不能生效了。

import type { Directive } from 'vue'
const mouseDownMove: Directive = {
  mounted(el, binding) {
    const { mouseDown, mouseMove, mouseUp } = binding.value
    el.onmousedown = (event) => {
      mouseDown && mouseDown(event)
      document.onselectstart = function () {
        return false
      }
      document.ondragstart = function () {
        return false
      }
      document.onmousemove = (event) => {
        mouseMove && mouseMove(event)
      }
      window.onmouseup = (event) => {
        document.onmousemove = null
        document.onselectstart = null
        window.onmouseup = null
        document.ondragstart = null
        mouseUp && mouseUp(event)
 

      <span class="xy-scrollbar__thumb"
            :style="thumbX"
            v-mouseDownMove="handleMouseDownX"></span>
      const  mouseDownMove = {
            mouseDown(){},
            mouseMove(){},
            mouseUp(){},
      }