police

src/components/police.vue

@@ -4,16 +4,16 @@
       <img src="../assets/img/tips.png" alt="" />
     </div>
     <div class="img">
-      <div id="screan" ref="dv" v-drag="(go)">
+      <div id="screan" ref="dv" v-drag="go">
         <img src="../assets/img/screan.png" alt="" />
       </div>
-      <div id="tou" ref="dv1" v-drag="(go)">
+      <div id="tou" ref="dv1" v-drag="go">
         <img src="../assets/img/tou.png" alt="" />
       </div>
-      <div id="ai" ref="dv2" v-drag="(go)">
+      <div id="ai" ref="dv2" v-drag="go">
         <img src="../assets/img/ai.png" alt="" />
       </div>
-      <div id="police" ref="dv2" v-drag="(go)">
+      <div id="police" ref="dv2" v-drag="go">
         <img src="../assets/img/police.png" alt="" />
       </div>
     </div>
@@ -26,13 +26,13 @@
 export default {
   data() {
     return {
-      that:this,
+      that: this,
     };
   },
   directives: {
     drag: {
       // 指令的定义
-      inserted: function (el,binding) {
+      inserted: function (el, binding) {
         // el.drag();
         console.log(el);
         //获取元素
@@ -42,6 +42,10 @@ export default {
         let l = 0;
         let t = 0;
         let isDown = false;
+        var dv = document.getElementById("screan");
+        var dv1 = document.getElementById("tou");
+        var dv2 = document.getElementById("ai");
+        var dv3 = document.getElementById("police");
         //鼠标按下事件
         el.onmousedown = function (e) {
           //获取x坐标和y坐标
@@ -74,6 +78,21 @@ export default {
             cdiv.style.top = nt + "px";
             // cdiv.style.left = e.clientX + "px";
             // cdiv.style.top = e.clientY + "px";
+            if (el.id == "screan") {
+              st(nl, nt, 1);
+            }
+
+            if (el.id == "tou") {
+              st(nl, nt, 2);
+            }
+
+            if (el.id == "ai") {
+              st(nl, nt, 4);
+            }
+
+            if (el.id == "police") {
+              st(nl, nt, 3);
+            }
             pan();
           };
         }
@@ -85,11 +104,6 @@ export default {
           document.onmousemove = null;
         };
         function pan() {
-          var dv = document.getElementById("screan");
-          var dv1 = document.getElementById("tou");
-          var dv2 = document.getElementById("ai");
-          var dv3 = document.getElementById("police");
-
           var _panL = dv.offsetLeft;
           var _panT = dv.offsetTop;
 
@@ -129,7 +143,7 @@ export default {
           ) {
             btn.className = "button dark";
             btn.onclick = function () {
-              binding.value()
+              binding.value();
             };
             right.style.display = "block";
             right.style.left = policeL + 240 + "px";
@@ -140,13 +154,131 @@ export default {
             right.style.display = "none";
           }
         }
-      }
+        function st(nl, nt, type) {
+          var _panL = dv.offsetLeft;
+          var _panT = dv.offsetTop;
+          var touL = dv1.offsetLeft;
+          var touT = dv1.offsetTop;
+
+          var policeL = dv3.offsetLeft;
+          var policeT = dv3.offsetTop;
+
+          var aiL = dv2.offsetLeft;
+          var aiT = dv2.offsetTop;
+
+          var stL = _panL - touL;
+          var stP = _panT - touT;
+
+          var spL = _panL - policeL;
+          var spP = _panT - policeT;
+
+          var saL = _panL - aiL;
+          var saP = _panT - aiT;
+
+          var saL2 = aiL - policeL;
+          var saP2 = aiT - policeT;
+
+          if (25 < saL2 && saL2 < 85 && -95 < saP2 && saP2 < -40 && type == 4) {
+            dv3.style.left = nl - 56 + "px";
+            dv3.style.top = nt + 70 + "px";
+          }
+
+          if (
+            -70 < stL &&
+            stL < -15 &&
+            45 < stP &&
+            stP < 100 &&
+            25 < spL &&
+            spL < 85 &&
+            -95 < spP &&
+            spP < -40 &&
+            -5 <= saL &&
+            saL < 8 &&
+            -5 <= saP &&
+            saP < 8 &&
+            type == 3
+          ) {
+            dv.style.left = nl + 56 + "px";
+            dv.style.top = nt - 70 + "px";
+
+            dv1.style.left = nl + 98 + "px";
+            dv1.style.top = nt - 143 + "px";
+
+            dv2.style.left = nl + 56 + "px";
+            dv2.style.top = nt - 70 + "px";
+          }
+
+          if (
+            -70 < stL &&
+            stL < -15 &&
+            45 < stP &&
+            stP < 100 &&
+            25 < spL &&
+            spL < 85 &&
+            -95 < spP &&
+            spP < -40 &&
+            type == 1
+          ) {
+            dv1.style.left = nl + 42 + "px";
+            dv1.style.top = nt - 73 + "px";
+
+            dv3.style.left = nl - 56 + "px";
+            dv3.style.top = nt + 70 + "px";
+          }
+
+          if (
+            -70 < stL &&
+            stL < -15 &&
+            45 < stP &&
+            stP < 100 &&
+            25 < spL &&
+            spL < 85 &&
+            -95 < spP &&
+            spP < -40 &&
+            type == 2
+          ) {
+            dv.style.left = nl + 42 + "px";
+            dv.style.top = nt - 53 + "px";
+
+            dv3.style.left = nl - 98 + "px";
+            dv3.style.top = nt + 143 + "px";
+          }
+
+          if (
+            -70 < stL &&
+            stL < -15 &&
+            45 < stP &&
+            stP < 100 &&
+            25 < spL &&
+            spL < 85 &&
+            -95 < spP &&
+            spP < -40 &&
+            type == 3
+          ) {
+            dv.style.left = nl + 56 + "px";
+            dv.style.top = nt - 70 + "px";
+
+            dv1.style.left = nl + 98 + "px";
+            dv1.style.top = nt - 143 + "px";
+          }
+
+          if (-70 < stL && stL < -15 && 45 < stP && stP < 100 && type == 1) {
+            dv1.style.left = nl + 42 + "px";
+            dv1.style.top = nt - 73 + "px";
+          }
+
+          if (-70 < stL && stL < -15 && 45 < stP && stP < 100 && type == 2) {
+            dv.style.left = nl - 42 + "px";
+            dv.style.top = nt + 73 + "px";
+          }
+        }
+      },
     },
   },
   methods: {
-    go(){
-      this.$router.push("/blockly")
-    }
+    go() {
+      this.$router.push("/blockly");
+    },
   },
 };
 </script>