点击切换排序

src/views/exercise_questions/preview/SortPreview.vue

@@ -21,7 +21,12 @@
         <div
           v-for="(itemNode, indexNode) in move_list"
           :key="indexNode"
-          :class="['drag-item', itemNode.correct == 'correct' ? 'correct' : 'error']"
+          :class="[
+            'drag-item',
+            itemNode.correct == 'correct' ? 'correct' : 'error',
+            click_index_list.indexOf(indexNode) > -1 ? 'drag-item-active' : '',
+          ]"
+          @click="handleClickItem(indexNode)"
         >
           <SvgIcon
             v-if="data.property.layout_type === 'vertical'"
@@ -56,6 +61,7 @@ export default {
       answer_list: [], // 存储用户答题
       move_list: [], // 移动后的数组
       drag: false,
+      click_index_list: [], // 点击选中的索引
     };
   },
   watch: {
@@ -68,6 +74,13 @@ export default {
       },
       deep: true,
     },
+    click_index_list: {
+      handler(val) {
+        if (val.length === 2) {
+          this.changeSort();
+        }
+      },
+    },
   },
   created() {
     this.handleData();
@@ -78,11 +91,7 @@ export default {
     handleData() {
       let sort_list = this.shuffle(JSON.parse(JSON.stringify(this.data.option_list)));
       sort_list.forEach((item, index) => {
-        if (item.mark === this.data.option_list[index].mark) {
-          item.correct = true;
-        } else {
-          item.correct = false;
-        }
+        item.correct = item.mark === this.data.option_list[index].mark;
       });
       this.move_list = sort_list;
     },
@@ -106,13 +115,22 @@ export default {
     // 判断对错
     changeuserAnswerJudge() {
       this.move_list.forEach((item, index) => {
-        if (item.mark === this.data.option_list[index].mark) {
-          item.correct = true;
-        } else {
-          item.correct = false;
-        }
+        item.correct = item.mark === this.data.option_list[index].mark;
       });
     },
+    // 点击item
+    handleClickItem(indexNode) {
+      // 查看答案模式下需要禁用
+      this.click_index_list.push(indexNode);
+    },
+    // 点击交换
+    changeSort() {
+      [this.move_list[this.click_index_list[0]], this.move_list[this.click_index_list[1]]] = [
+        this.move_list[this.click_index_list[1]],
+        this.move_list[this.click_index_list[0]],
+      ];
+      this.click_index_list = [];
+    },
   },
 };
 </script>
@@ -143,6 +161,7 @@ export default {
       max-width: 800px;
       padding: 8px 16px;
       background: #f9f8f9;
+      border: 1px solid #f9f8f9;
       border-radius: 4px;
 
       :deep p {
@@ -173,6 +192,12 @@ export default {
         margin: 16px auto 0;
       }
     }
+
+    .drag-item-active {
+      .drag-content {
+        border-color: #306eff;
+      }
+    }
   }
 }
 </style>