Update ModelisationArea.vue

jasiukiewicztymon · Mar 13, 2022 · 987fbfd · 987fbfd
1 parent 41aeb9b
commit 987fbfd
Showing 1 changed file with 39 additions and 9 deletions.
diff --git a/src/src/components/ModelisationArea.vue b/src/src/components/ModelisationArea.vue
@@ -1,9 +1,7 @@
 <template>
     <div @click="checkname" id="main-box" class="absolute left-[50%] overflow-auto -translate-x-[50%] top-[16vw] md:top-[12vw] lg:top-[9vw] w-[90vw] h-[82.5vh] lg:h-[75vh]">
-        <div class="w-[10000px] h-[10000px] p-[20px]">
-            <div class="w-[200px] h-[300px] bg-blue-300">
-
-            </div>
+        <div @mousedown="mousedown($event)" @mousemove="mousemove($event)" @mouseleave="this.drag.isDown = false" @mouseup="this.drag.isDown = false" :class="{active: this.drag.isDown}" class="w-[10000px] h-[10000px] p-[20px]">
+            <div class="absolute top-[5000px] left-[20px] w-[100px] h-[100px] bg-red-100"></div>
         </div>
     </div>
 </template>
@@ -17,14 +15,22 @@ export default {
     data() {
         return {
            data: datas,
+           drag: {
+               isDown: false,
+               startX: 0,
+               startY: 0,
+               scrollLeft: 0,
+               scrollTop: 0,
+           }
         }
     },
     methods: {
         checkname() {
             if (document.getElementById('plus-info').classList.contains('on')) {
                 console.log(this.data)
                 document.getElementById('main-box').onmousedown = function(e) {
-                    console.log([e.clientX, e.clientY])
+                    console.log(e.offsetX)
+                    console.log(e.offsetY)
                 }
             }
             else if (document.getElementById('trash-info').classList.contains('on')) {
@@ -36,12 +42,36 @@ export default {
             else if (document.getElementById('slash-lg-info').classList.contains('on')) {
                 console.log('4')
             }
+        },
+        replace() {
+            document.getElementById('main-box').scrollTop = 5000;
+            document.getElementById('main-box').scrollLeft = 5000;
+        },
+        mousedown(e) {
+            let element = document.getElementById('main-box');
+
+            this.drag.isDown = true;
+            this.drag.startX = e.pageX - element.offsetLeft;
+            this.drag.startY = e.pageY - element.offsetTop;
+            this.drag.scrollLeft = element.scrollLeft;
+            this.drag.scrollTop = element.scrollTop;
+        },
+        mousemove(e) {
+            let element = document.getElementById('main-box');
+            if (this.drag.isDown) {
+                e.preventDefault();
+                let x = e.pageX - element.offsetLeft;
+                let y = e.pageY - element.offsetTop;
+                let wx = (x - this.drag.startX) * 3;
+                let wy = (y - this.drag.startY) * 3;
+                element.scrollLeft = this.drag.scrollLeft - wx;
+                element.scrollTop = this.drag.scrollTop - wy;
+            }
         }
     },
-    mounted() {
-        document.getElementById('main-box').scrollTop = 5000;
-        document.getElementById('main-box').scrollLeft = 5000;
-    }
+    created() {
+        window.addEventListener('load', this.replace)
+    },
 }
 </script>