text: import { on } from '@/utils/tools'
  const directives = {
    draggable: {
      inserted: (el, binding, vnode) => {
        let triggerDom = document.querySelector(binding.value.trigger)
        triggerDom.style.cursor = 'move'
        let bodyDom = document.querySelector(binding.value.body)
        let pageX = 0
        let pageY = 0
        let transformX = 0
        let transformY = 0
        let canMove = false
        const handleMousedown = e => {
          let transform = /\(.*\)/.exec(bodyDom.style.transform)
          if (transform) {
            transform = transform[0].slice(1, transform[0].length - 1)
            let splitxy = transform.split('px, ')
            transformX = parseFloat(splitxy[0])
            transformY = parseFloat(splitxy[1].split('px')[0])
          }
          pageX = e.pageX
          pageY = e.pageY
          canMove = true
        }
        const handleMousemove = e => {
          let xOffset = e.pageX - pageX + transformX
          let yOffset = e.pageY - pageY + transformY
          if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
        }
        const handleMouseup = e => {
          canMove = false
        }
        on(triggerDom, 'mousedown', handleMousedown)
        on(document, 'mousemove', handleMousemove)
        on(document, 'mouseup', handleMouseup)
      },
      update: (el, binding, vnode) => {
        if (!binding.value.recover) return
        let bodyDom = document.querySelector(binding.value.body)
        bodyDom.style.transform = ''
      }
    }
  }
  
  export default directives
  