拖拽题样式优化

闫增涛

2024-06-25 ad1249855f81b4e146a0140df29ae69b09a1ca11

 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;