lilishop-ui/manager/src/components/hotzone/directives/dragItem.js

import _ from '../utils'

export default {
  bind: function (el, binding, vnode) {
    el.addEventListener('mousedown', handleMouseDown)
    let collision
    function handleMouseDown (e) {
      e && e.stopPropagation()
      let container = _.getOffset(el.parentNode)
      let preX = _.getPageX(e)
      let preY = _.getPageY(e)
      let topPer
      let leftPer
      let flag

      window.addEventListener('mousemove', handleChange,{ passive: false })
      window.addEventListener('mouseup', handleMouseUp,{ passive: false })

      function handleChange (e) {
        e && e.preventDefault()
        flag = true
        collision = false
        // Hide the info displayed by hover
        vnode.context.handlehideZone(true)

        let setting = vnode.context.setting
        let currentIndex = vnode.context.index
        let moveX = _.getPageX(e) - preX
        let moveY = _.getPageY(e) - preY

        setting.topPer = setting.topPer || 0
        setting.leftPer = setting.leftPer || 0
        topPer = _.decimalPoint(moveY / container.height + setting.topPer)
        leftPer = _.decimalPoint(moveX / container.width + setting.leftPer)

        // Hotzone moving boundary processing
        if (topPer < 0) {
          topPer = 0
          moveY = -container.height * setting.topPer
        }

        if (leftPer < 0) {
          leftPer = 0
          moveX = -container.width * setting.leftPer
        }

        if (topPer + setting.heightPer > 1) {
          topPer = 1 - setting.heightPer
          moveY = container.height * (topPer - setting.topPer)
        }

        if (leftPer + setting.widthPer > 1) {
          leftPer = 1 - setting.widthPer
          moveX = container.width * (leftPer - setting.leftPer)
        }
        // 拖拽碰撞检测
        if (vnode.context.$parent.zones.length > 1) {
          let currentzones = JSON.parse(JSON.stringify(vnode.context.$parent.zones)).map((zone) => {
            return {
              left: (zone.leftPer || 0) * container.width,
              top: (zone.topPer || 0) * container.height,
              width: (zone.widthPer || 0) * container.width,
              height: (zone.heightPer || 0) * container.height
            }
          })
          // 矫正
          let changeSetting = {}
          changeSetting.left = setting.leftPer * container.width + moveX
          changeSetting.top = setting.topPer * container.height + moveY
          changeSetting.width = setting.widthPer * container.width
          changeSetting.height = setting.heightPer * container.height
          // 碰撞检测
          for (let i = 0, len = currentzones.length; i < len; i++) {
            if (currentIndex !== i && _.handleEgdeCollisions(currentzones[i], changeSetting)) {
              collision = true
              break
            }
          }
        }
        el.style.transform = `translate(${moveX}px, ${moveY}px)`
      }

      function handleMouseUp () {
        if (flag) {
          flag = false
          el.style.transform = 'translate(0, 0)'
          if (!collision) {
            vnode.context.changeInfo({
              topPer,
              leftPer
            })
          }
        }

        // Show the info
        vnode.context.handlehideZone(false)

        window.removeEventListener('mousemove', handleChange)
        window.removeEventListener('mouseup', handleMouseUp)
      }
    }

    el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
  },
  unbind: function (el) {
    el.$destroy()
  }
}