Mobile support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-draggable-resizable",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Vue2 Component for resizable and draggable elements",
   "author": "Maurizio Bonani <maurizio.bonani@gmail.com>",
   "main": "dist/index.js",

src/App.vue

@@ -5,6 +5,30 @@
         <p>Component</p>
       </VueDraggableResizable>
     </div>
+    <div style="height: 500px; width: 500px; margin: 20px; border: 1px solid red; position: relative;">
+      <h2>Grid 30x30</h2>
+      <VueDraggableResizable :x="50" :y="50" :w="400" :h="400" :grid="[30, 30]" :parent="true">
+      <p>Component</p>
+      </VueDraggableResizable>
+    </div>
+    <div style="height: 500px; width: 500px; margin: 20px; border: 1px solid red; position: relative;">
+      <h2>Custom handler</h2>
+      <VueDraggableResizable :x="50" :y="50" :w="150" :h="50" :parent="true" :resizable="false" :dragHandle="'.dragHandle'">
+        <p>Component</p>
+        <span class="dragHandle">
+          =
+        </span>
+      </VueDraggableResizable>
+    </div>
+    <div style="height: 500px; width: 500px; margin: 20px; border: 1px solid red; position: relative;">
+      <h2>Grid 30x30 and handler</h2>
+      <VueDraggableResizable :x="50" :y="50" :w="150" :h="50" :parent="true" :grid="[30, 30]" :resizable="false" :dragHandle="'.dragHandle'">
+        <p>Component</p>
+        <span class="dragHandle">
+          =
+        </span>
+      </VueDraggableResizable>
+    </div>
   </div>
 </template>
 
@@ -23,4 +47,20 @@ export default {
   .active {
     border: 1px dashed black;
   }
+  h2 {
+    opacity: 0.3;
+    padding: 0 0 0 20px;
+    z-index: -1;
+  }
+  .dragHandle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 5px;
+    font-size: 20px;
+    background-color: lightgrey;
+  }
+  .vdr {
+    background: white;
+  }
 </style>

src/components/vue-draggable-resizable.vue

@@ -10,6 +10,7 @@
       resizing: resizing
     }"
     @mousedown.stop="elmDown"
+    @touchstart.prevent.stop="elmDown"
     @dblclick="fillParent"
   >
     <div
@@ -20,6 +21,7 @@
       :class="'handle-' + handle"
       :style="{ display: enabled ? 'block' : 'none'}"
       @mousedown.stop.prevent="handleDown(handle, $event)"
+      @touchstart.stop.prevent="handleDown(handle, $event)"
     ></div>
     <slot></slot>
   </div>
@@ -157,6 +159,11 @@ export default {
     document.documentElement.addEventListener('mousedown', this.deselect, true)
     document.documentElement.addEventListener('mouseup', this.handleUp, true)
 
+    // touch events bindings
+    document.documentElement.addEventListener('touchmove', this.handleMove, true)
+    document.documentElement.addEventListener('touchend touchcancel', this.deselect, true)
+    document.documentElement.addEventListener('touchstart', this.handleUp, true)
+
     this.elmX = parseInt(this.$el.style.left)
     this.elmY = parseInt(this.$el.style.top)
     this.elmW = this.$el.offsetWidth || this.$el.clientWidth
@@ -168,6 +175,11 @@ export default {
     document.documentElement.removeEventListener('mousemove', this.handleMove, true)
     document.documentElement.removeEventListener('mousedown', this.deselect, true)
     document.documentElement.removeEventListener('mouseup', this.handleUp, true)
+
+    // touch events bindings removed
+    document.documentElement.addEventListener('touchmove', this.handleMove, true)
+    document.documentElement.addEventListener('touchend touchcancel', this.deselect, true)
+    document.documentElement.addEventListener('touchstart', this.handleUp, true)
   },
 
   data: function () {
@@ -236,8 +248,13 @@ export default {
       }
     },
     deselect: function (e) {
-      this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
-      this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop
+      if (e.type.indexOf('touch') !== -1) {
+        this.mouseX = e.changedTouches[0].clientX
+        this.mouseY = e.changedTouches[0].clientY
+      } else {
+        this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
+        this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop
+      }
 
       this.lastMouseX = this.mouseX
       this.lastMouseY = this.mouseY
@@ -319,8 +336,13 @@ export default {
       window.requestAnimationFrame(animate)
     },
     handleMove: function (e) {
-      this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
-      this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop
+      const isTouchMove = e.type.indexOf('touchmove') !== -1
+      this.mouseX = isTouchMove
+        ? e.touches[0].clientX
+        : e.pageX || e.clientX + document.documentElement.scrollLeft
+      this.mouseY = isTouchMove
+        ? e.touches[0].clientY
+        : e.pageY || e.clientY + document.documentElement.scrollTop
 
       let diffX = this.mouseX - this.lastMouseX + this.mouseOffX
       let diffY = this.mouseY - this.lastMouseY + this.mouseOffY
@@ -390,6 +412,10 @@ export default {
       }
     },
     handleUp: function (e) {
+      if (e.type.indexOf('touch') !== -1) {
+        this.lastMouseX = e.changedTouches[0].clientX
+        this.lastMouseY = e.changedTouches[0].clientY
+      }
       this.handle = null
       if (this.resizing) {
         this.resizing = false
@@ -489,4 +515,15 @@ export default {
     right: -10px;
     cursor: se-resize;
   }
+  @media only screen and (max-width: 768px) {
+    /* For mobile phones: */
+    [class*="handle-"]:before {
+      content: '';
+      left: -10px;
+      right: -10px;
+      bottom: -10px;
+      top: -10px;
+      position: absolute;
+    }
+  }
 </style>