From ad1249855f81b4e146a0140df29ae69b09a1ca11 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 25 六月 2024 16:50:25 +0800
Subject: [PATCH] 拖拽题样式优化

---
 src/components/dragQuestion/index.vue |   45 ++++++++++++++++++++++++++++++++-------------
 1 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/dragQuestion/index.vue b/src/components/dragQuestion/index.vue
index 61135e1..7d2f42d 100644
--- a/src/components/dragQuestion/index.vue
+++ b/src/components/dragQuestion/index.vue
@@ -9,7 +9,7 @@
       class="question-box"
     >
       <!-- 棰樺共 -->
-      <div>
+      <div class="stem">
         <span v-for="(ditem, dindex) in item.stem" :key="dindex">
           <span v-if="typeof ditem == 'string'">
             {{ ditem }}
@@ -76,7 +76,7 @@
                   />
                 </p>
                 <!-- 姝ｇ‘閿欒鍥炬爣 -->
-                <span class="mr-10">
+                <span class="mr-10 judge-icon">
                   <svg
                     v-if="item.isRight"
                     t="1716986419862"
@@ -193,6 +193,8 @@
       maxX: null,
       maxY: null,
       spaceList: [],
+      submitState:false,
+      isLift:false
     };
   },
   mounted() {
@@ -204,6 +206,8 @@
     // 3.闄愬埗榧犳爣鏉惧紑瑕佸湪绌烘牸鐨勮寖鍥村唴
     mousedown(e) {
       e.preventDefault();
+      if(this.submitState) return false
+      this.isLift = false
       console.log("榧犳爣鎸変笅", e);
       this.moveDom = e.toElement;
       this.parentDom = this.getParentWithClass(e.toElement, "question-box");
@@ -236,6 +240,7 @@
               e.y >= item.minY &&
               e.y <= item.maxY
             ) {
+              if(!this.isLift) return false
               this.$set(
                 this.drageQuestion[this.questionIndex].userAnswer,
                 index,
@@ -245,6 +250,7 @@
                 }
               );
               this.moveDom.style.display = "none";
+              this.moveDom = null;
             }
           }
         }
@@ -253,8 +259,11 @@
     // 榧犳爣鎶捣
     mouseup(e) {
       if (this.moveDom) {
-        this.moveDom = null;
+        // this.moveDom = null;
+        
       }
+      this.isLift = true
+    
     },
     // 鑾峰彇棰樼洰绌烘牸鍧愭爣
     getSpaceInfo(parentDom) {
@@ -263,10 +272,10 @@
       for (let index = 0; index < list.length; index++) {
         const itemInfo = list[index].getBoundingClientRect();
         arr.push({
-          minX: itemInfo.x,
-          maxX: itemInfo.x + itemInfo.width,
-          minY: itemInfo.y,
-          maxY: itemInfo.y + itemInfo.height,
+          minX: itemInfo.x -10,
+          maxX: itemInfo.x + itemInfo.width + 10,
+          minY: itemInfo.y -10 ,
+          maxY: itemInfo.y + itemInfo.height + 10,
         });
       }
       this.spaceList = arr;
@@ -298,6 +307,7 @@
     },
     // 鎻愪氦
     submitData() {
+      this.submitState = true
       let arr = [];
       const data = this.drageQuestion;
       for (let index = 0; index < data.length; index++) {
@@ -306,12 +316,13 @@
           let citem = item.userAnswer[cindex];
           arr[cindex] = citem.value
         }
-        item.isRight = arr == item.answer
+        item.isRight = JSON.stringify(arr)  == JSON.stringify(item.answer)
+        item.isComplete = true
       }
-      
       console.log(arr,this.drageQuestion[0]);
     },
     redio() {
+      this.submitState = false
       localStorage.removeItem(
         this.config.activeBook.name + "-drag-" + this.page
       );
@@ -319,6 +330,7 @@
       // const data = []
       for (let index = 0; index < this.drageQuestion.length; index++) {
         const item = this.drageQuestion[index];
+        item.isComplete = false
         for (let cindex = 0; cindex < item.option.length; cindex++) {
           const citem = item.option[cindex];
           arr.push(
@@ -402,8 +414,12 @@
 .drag-option {
   cursor: pointer;
 }
+.stem {
+  line-height: 2em;
+}
 .drag-bottom-btn {
   width: 100%;
+  margin-top: 40px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -415,8 +431,12 @@
 }
 .analysis {
   margin: 20px 0;
-  width: 94%;
+  width: 100%;
   // margin-left: 12px;
+}
+.judge-icon {
+  display: flex;
+  align-items: center;
 }
 .el-collapse {
   width: 100%;
@@ -454,9 +474,8 @@
           text-align: left;
           display: flex;
           span:nth-child(1) {
-            display: inline-block;
             text-indent: 0;
-            width: 82px;
+            width: 100px;
           }
         }
         .correctBox {
@@ -476,7 +495,7 @@
           color: #ee1818;
           span {
             height: min-content;
-            width: 100px;
+            width: 115px;
           }
           .errorBox {
             width: 100px;

--
Gitblit v1.9.1