Added dragHandle and dragCancel props

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to `vue-draggable-resizable` will be documented in this file
 
+## 1.6.0 - 2018-01-16
+- add `dragHandle` and `dragCancel` props
+
 ## 1.5.0 - 2017-09-19
 - implement :z prop and watcher
 

README.md

@@ -253,6 +253,26 @@ Restricts the movement and the dimensions of the element to the parent.
 <vue-draggable-resizable :parent="true">
 ```
 
+#### dragHandle
+Type: `String`<br>
+Required: `false`
+
+Defines the selector that should be used to drag the component.
+
+```html
+<vue-draggable-resizable :drag-handle=".drag">
+```
+
+#### dragCancel
+Type: `String`<br>
+Required: `false`
+
+Defines a selector that should be used to prevent drag initialization.
+
+```html
+<vue-draggable-resizable :drag-handle=".drag">
+```
+
 #### maximize
 Type: `Boolean`<br>
 Required: `false`<br>

docs/app.js

@@ -78,4 +78,8 @@ new Vue({
   data: {
     active: false
   }
+});
+
+new Vue({
+  el: '#app8'
 });

docs/index.html

@@ -145,6 +145,29 @@ <h2 class="section-title">External activation</h2>
         </div>
       </div>
 
+      <section class="section-description">
+        <h2 class="section-title">Drag Handle and Drag Cancel</h2>
+        <p>Component that can be dragged only through a handle <code>:drag-handle="'.drag'"</code> and component that cannot be dragged from a handle <code>:drag-cancel="'.cancel'"</code></p>
+        <pre>&lt;vue-draggable-resizable :parent="true" style="border: 1px solid black;" :drag-handle="'.drag'"&gt;
+  &lt;div class="drag" style="padding: 6px; margin: 6px; background-color: #CCC; border: 2px solid"&gt;Drag Only Here&lt;/div&gt;
+&lt;/vue-draggable-resizable&gt;
+&lt;vue-draggable-resizable :x="300" :y="0" :parent="true" style="border: 1px solid black;" :drag-cancel="'.cancel'"&gt;
+  &lt;div class="cancel" style="padding: 6px; margin: 6px; background-color: #CCC; border: 2px solid"&gt;Cannot Drag Here&lt;/div&gt;
+&lt;/vue-draggable-resizable>
+        </pre>
+      </section>
+
+      <div id="app8">
+        <div style="height: 300px; border: 1px solid blue; margin: 1em;">
+          <vue-draggable-resizable :parent="true" style="border: 1px solid black;" :drag-handle="'.drag'">
+            <div class="drag" style="padding: 6px; margin: 6px; background-color: #CCC; border: 2px solid">Drag Only Here</div>
+          </vue-draggable-resizable>
+          <vue-draggable-resizable :x="300" :y="0" :parent="true" style="border: 1px solid black;" :drag-cancel="'.cancel'">
+            <div class="cancel" style="padding: 6px; margin: 6px; background-color: #CCC; border: 2px solid">Cannot Drag Here</div>
+          </vue-draggable-resizable>
+        </div>
+      </div>
+
     </div>
 
     <footer>

src/components/vue-draggable-resizable.vue

@@ -26,6 +26,8 @@
 </template>
 
 <script>
+import { matchesSelectorToParentElements } from '../utils/dom'
+
 export default {
   replace: true,
   name: 'VueDraggableResizable',
@@ -100,6 +102,14 @@ export default {
         return new Set(val.filter(h => s.has(h))).size === val.length
       }
     },
+    dragHandle: {
+      type: String,
+      default: null
+    },
+    dragCancel: {
+      type: String,
+      default: null
+    },
     axis: {
       type: String,
       default: 'both',
@@ -205,6 +215,12 @@ export default {
       const target = e.target || e.srcElement
 
       if (this.$el.contains(target)) {
+        if (
+          (this.dragHandle && !matchesSelectorToParentElements(target, this.dragHandle, this.$el)) ||
+          (this.dragCancel && matchesSelectorToParentElements(target, this.dragCancel, this.$el))) {
+          return
+        }
+
         this.reviewDimensions()
 
         if (!this.enabled) {
@@ -419,9 +435,6 @@ export default {
     position: absolute;
     box-sizing: border-box;
   }
-  .draggable:hover {
-    cursor: move;
-  }
   .handle {
     box-sizing: border-box;
     display: none;

src/utils/dom.js

@@ -0,0 +1,10 @@
+export function matchesSelectorToParentElements (el, selector, baseNode) {
+  let node = el
+  do {
+    if (node.matches(selector)) return true
+    if (node === baseNode) return false
+    node = node.parentNode
+  } while (node)
+
+  return false
+}

test/unit/specs/VueDraggableResizable.spec.js

@@ -595,6 +595,46 @@ describe('VueDraggableResizable.vue', function () {
         })
       })
     })
+
+    it('should drag the component only by the dragHandle selector', function () {
+      const activated = sinon.spy()
+
+      const vm = mount(VueDraggableResizable, {
+        dragHandle: '.drag'
+      }, {
+        activated
+      }, '<div class="drag">Handle</div>')
+
+      simulate(vm.$el, 'mousedown')
+
+      expect(vm.$data.enabled).to.equal(false)
+
+      simulate(vm.$el.querySelector('.drag'), 'mousedown')
+
+      expect(vm.$data.enabled).to.equal(true)
+
+      sinon.assert.calledWith(activated)
+    })
+
+    it('should not drag the component by the dragCancel selector', function () {
+      const activated = sinon.spy()
+
+      const vm = mount(VueDraggableResizable, {
+        dragCancel: '.cancel'
+      }, {
+        activated
+      }, '<div class="cancel">Cancel</div>')
+
+      simulate(vm.$el.querySelector('.cancel'), 'mousedown')
+
+      expect(vm.$data.enabled).to.equal(false)
+
+      sinon.assert.notCalled(activated)
+
+      simulate(vm.$el, 'mousedown')
+
+      expect(vm.$data.enabled).to.equal(true)
+    })
   })
 
   /*************************