优化管理端代码结构

manager/src/components/hotzone/directives/dragItem.js

@@ -0,0 +1,108 @@
+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()
+  }
+}