支持自动贴合通过 snapToTarget 属性指定的外部元素

.gitignore

@@ -22,3 +22,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+.history
+.vscode

README.md

@@ -75,6 +75,22 @@
 ```vue
 <vue-draggable-resizable :snap="true" :snap-tolerance="20" />
 ```
+
+**snapToTarget**<br/>
+类型: `String`<br/>
+必需: `false`<br/>
+默认: `null`
+
+当调用`snap`时，定义组件对齐到其他外部元素。
+
+```vue
+<!-- guide-line 为外部元素样式名 -->
+<vue-draggable-resizable
+  :snap="true"
+  :snap-tolerance="20"
+  snap-to-target="guide-line"
+/>
+```
 ## 新增Events
 **refLineParams**<br/>
 参数: params<br/>

src/components/vue-draggable-resizable.vue

@@ -8,6 +8,7 @@
       [classNameDraggable]: draggable,
       [classNameResizable]: resizable
     }, className]"
+    @click="elementEnable"
     @mousedown="elementDown"
     @touchstart="elementTouchDown"
   >
@@ -194,6 +195,10 @@ export default {
       type: [Boolean, String],
       default: false
     },
+    parentSize: {
+      type: Object,
+      defualt: null
+    },
     onDragStart: {
       type: Function,
       default: null
@@ -218,6 +223,10 @@ export default {
         return typeof val === 'number'
       }
     },
+    snapToTarget: {
+      type: String,
+      default: null
+    },
     // 缩放比例
     scaleRatio: {
       type: Number,
@@ -255,7 +264,8 @@ export default {
       enabled: this.active,
       resizing: false,
       dragging: false,
-      zIndex: this.z
+      zIndex: this.z,
+      brotherNodes: null
     }
   },
 
@@ -351,8 +361,18 @@ export default {
 
       this.elementDown(e)
     },
+    elementEnable (e) {
+      if (this.enabled) return
+      const target = e.target || e.srcElement
+      if (this.$el.contains(target)) {
+        this.enabled = true
+        this.$emit('activated')
+        this.$emit('update:active', true)
+      }
+    },
     // 元素按下
     elementDown (e) {
+      if (!this.enabled) return
       const target = e.target || e.srcElement
 
       if (this.$el.contains(target)) {
@@ -367,17 +387,18 @@ export default {
           return
         }
 
-        if (!this.enabled) {
-          this.enabled = true
-
-          this.$emit('activated')
-          this.$emit('update:active', true)
-        }
-
         if (this.draggable) {
           this.dragging = true
         }
 
+        this.brotherNodes = Array.from(this.$el.parentNode.childNodes)
+        if (this.snapToTarget) {
+          const targets = document.querySelectorAll('.' + this.snapToTarget)
+          if (targets.length) this.brotherNodes.push(...targets)
+        }
+
+        this.brotherNodes = this.brotherNodes.filter(node => !!node.className)
+
         this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX
         this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY
 
@@ -433,6 +454,7 @@ export default {
     },
     // 控制柄按下
     handleDown (handle, e) {
+      if (!this.enabled) return
       if (this.onResizeStart && this.onResizeStart(handle, e) === false) {
         return
       }
@@ -566,10 +588,12 @@ export default {
     },
     // 移动
     move (e) {
+      if (this.dragging) {
+        this.elementMove(e)
+        return
+      }
       if (this.resizing) {
         this.handleMove(e)
-      } else if (this.dragging) {
-        this.elementMove(e)
       }
     },
     // 元素移动
@@ -715,7 +739,7 @@ export default {
         for (let i in refLine) { refLine[i] = JSON.parse(JSON.stringify(temArr)) }
 
         // 获取当前父节点下所有子节点
-        const nodes = this.$el.parentNode.childNodes
+        const nodes = this.brotherNodes
 
         let tem = {
           value: { x: [[], [], []], y: [[], [], []] },
@@ -732,9 +756,22 @@ export default {
           activeBottom = groupTop + groupHeight
         }
         for (let item of nodes) {
-          if (item.className !== undefined && !item.className.includes(this.classNameActive) && item.getAttribute('data-is-snap') !== null && item.getAttribute('data-is-snap') !== 'false') {
-            const w = item.offsetWidth
-            const h = item.offsetHeight
+          const className = item.className
+          const snapIgnore = item.getAttribute('data-is-snap')
+          item.isGuideLine = className.includes(this.snapToTarget)
+          if (item.isGuideLine) {
+            item.isVGuideLine = className.includes('line-v')
+          }
+          if (!className.includes(this.classNameActive) && (snapIgnore !== null || item.isGuideLine) && snapIgnore !== 'false') {
+            let w = item.offsetWidth
+            let h = item.offsetHeight
+            if (item.isGuideLine) {
+              if (item.isVGuideLine) {
+                w = 0
+              } else {
+                h = 0
+              }
+            }
             const l = item.offsetLeft // 对齐目标的left
             const r = l + w // 对齐目标right
             const t = item.offsetTop// 对齐目标的top
@@ -861,7 +898,7 @@ export default {
       let groupLeft = 0
       let groupTop = 0
       for (let item of nodes) {
-        if (item.className !== undefined && item.className.includes(this.classNameActive)) {
+        if (item.className.includes(this.classNameActive)) {
           activeAll.push(item)
         }
       }
@@ -920,6 +957,10 @@ export default {
   },
 
   watch: {
+    parentSize: {
+      handler: 'checkParentSize',
+      deep: true
+    },
     active (val) {
       this.enabled = val