Cleaned up, working on draggable flag

src/Modal.vue

@@ -92,6 +92,11 @@
           overlay: false
         },
 
+        shift: {
+          left: 0,
+          top: 0
+        },
+
         modal: {
           width: this.width,
           height: this.height
@@ -107,7 +112,6 @@
     },
     watch: {
       visible (value) {
-        // if (this.delay > 0) {
         if (value) {
           this.visibility.overlay = true
 
@@ -126,16 +130,8 @@
               this.removeDraggableListeners()
             })
           }, this.delay)
-
-          // this.removeDraggableHandlers()
         }
-        //  } else {
-        //    this.visibility.overlay = value
-        //    this.$nextTick(() => {
-        //      this.visibility.modal = value
-        //    })
-        //  }
-      },
+      }
     },
     created () {
       Modal.event.$on('toggle', (name, state, params) => {
@@ -155,8 +151,10 @@
     computed: {
       position () {
         return {
-          left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0),
-          top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0)
+          left: Math.max(this.shift.left + this.pivotX *
+            (this.window.width - this.modal.width), 0),
+          top: Math.max(this.shift.top + this.pivotY *
+            (this.window.height - this.modal.height), 0)
         }
       },
       modalClass () {
@@ -169,7 +167,7 @@
           width: this.modal.width + 'px',
           height: this.modal.height + 'px'
         }
-      },
+      }
     },
     methods: {
       onWindowResize () {
@@ -179,20 +177,19 @@
         if (this.adaptive) {
           let width = Math.min(this.window.width, this.modal.width)
           let height = Math.min(this.window.height, this.modal.height)
-
-          this.modal.width = width // Math.max(width, this.minWidth);
-          this.modal.height = height // Math.max(height, this.minHeight);
+          // Math.max(width, this.minWidth);
+          this.modal.width = width
+          // Math.max(height, this.minHeight);
+          this.modal.height = height
         }
       },
       genEventObject (params) {
         //todo: clean this up
-        return Vue.util.extend(
-          {
+        return Vue.util.extend({
           name: this.name,
           ref: this.$refs.modal,
           timestamp: Date.now()
-          },
-          params || {});
+        }, params || {});
       },
       resize (event) {
         this.modal.width = event.size.width
@@ -243,6 +240,41 @@
         let dragger = this.getDraggableElement()
 
         if (dragger) {
+          let startX = 0
+          let startY = 0
+          //let shiftX = 0
+          //let shiftY = 0
+
+          let mousedown = (event) => {
+            document.addEventListener('mousemove', mousemove)
+            document.addEventListener('mouseup', mouseup)
+
+            startX = event.clientX;
+            startY = event.clientY;
+
+            event.preventDefault()
+          }
+
+          let mousemove = (event) => {
+            this.shift.left = event.clientX - startX
+            this.shift.top = event.clientY - startY
+
+            console.log(this.shift)
+
+            event.preventDefault()
+          }
+
+          let mouseup = (event) => {
+            dragger.removeEventListener('mousedown', mousedown)
+            document.removeEventListener('mousemove', mousemove)
+            document.removeEventListener('mouseup', mouseup)
+            // this.shiftX = shiftX
+            // this.shiftY = shiftY
+            // console.log(shiftX, shiftY)
+            event.preventDefault()
+          }
+
+          dragger.addEventListener('mousedown', mousedown)
           console.log(dragger)
         }
       },