拖拽题优化

闫增涛

2024-06-26 4e94c6ff652dbcea58ece05c734956e88270e58f

 src/components/dragQuestion/index.vue

@@ -14,7 +14,47 @@
          <span v-if="typeof ditem == 'string'">
            {{ ditem }}
          </span>
          <span class="space" v-else>{{ item.userAnswer[ditem.num].txt }}</span>
          <span class="space" v-else>
            {{ item.userAnswer[ditem.num].txt }}
            <span>
              <svg
                    v-if="getItemRight(index,ditem.num)"
                    t="1716986419862"
                    class="icon"
                    viewBox="0 0 1820 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="18767"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="40"
                    height="20"
                  >
                    <path
                      d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                      fill="#1AFA29"
                      p-id="18768"
                    ></path>
                  </svg>
                  <svg
                    v-if="getItemRight(index,ditem.num) == false"
                    t="1716987085767"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="25745"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                      fill="#d81e06"
                      p-id="25746"
                    ></path>
                  </svg>
            </span>
          </span>
        </span>
      </div>

@@ -30,7 +70,6 @@
      <div class="analysis" v-if="item.isComplete">
        <el-collapse
          v-model="item.isUnfold"
          @change="handleChange(item)"
          accordion
          v-if="item.questionType != 'shortAnswer'"
        >
@@ -76,7 +115,7 @@
                  />
                </p>
                <!-- 正确错误图标 -->
                <span class="mr-10 judge-icon">
                <!-- <span class="mr-10 judge-icon">
                  <svg
                    v-if="item.isRight"
                    t="1716986419862"
@@ -113,7 +152,7 @@
                      p-id="25746"
                    ></path>
                  </svg>
                </span>
                </span> -->

                <div class="headerConent sitgBox">
                  <p v-if="!item.isUnfold">
@@ -157,11 +196,11 @@
  watch: {
    question: {
      handler(newValue, oldValue) {
        console.log("监听传值", newValue);
        let oldAnswer = localStorage.getItem(
          this.config.activeBook.name + "-drag-" + this.page
        );
        if (oldAnswer) {
          this.submitState = true
          oldAnswer = JSON.parse(oldAnswer);
          for (let index = 0; index < newValue.length; index++) {
            // 旧答案赋值
@@ -198,7 +237,6 @@
    };
  },
  mounted() {
    console.log("传值", this.question);
  },
  methods: {
    // 1.选项拖拽
@@ -208,17 +246,15 @@
      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");
      this.questionIndex = this.parentDom.getAttribute("num");
      this.getSpaceInfo(this.parentDom);
      if(!this.spaceList.length) this.getSpaceInfo(this.parentDom);
      const parentInfo = this.parentDom.getBoundingClientRect();
      this.parentX = parentInfo.x;
      this.parentY = parentInfo.y;
      this.maxX = parentInfo.x + this.parentDom.clientWidth;
      this.maxY = parentInfo.y + this.parentDom.clientHeight;
      console.log("父盒子", parentInfo);
    },
    // 鼠标移动
    mousemove(e) {
@@ -230,16 +266,18 @@
        const moveY = e.y - this.parentY;
        this.moveDom.style.left = moveX + "px";
        this.moveDom.style.top = moveY + "px";
        // 如果移动到空格范围内,将答案填入空格
        // 如果还有有空格
        if (this.spaceList.length) {
          for (let index = 0; index < this.spaceList.length; index++) {
            const item = this.spaceList[index];
            let item = this.spaceList[index];
            if(!item) return false
            if (
              e.x >= item.minX &&
              e.x <= item.maxX &&
              e.y >= item.minY &&
              e.y <= item.maxY
            ) {
              // 如果移动到空格范围内,且鼠标抬起后,将答案填入空格,并将该空格的数据清空(空格不能删除,只能清空,否则导致数组索引改变,不能正确写入到指定空格中)
              if(!this.isLift) return false
              this.$set(
                this.drageQuestion[this.questionIndex].userAnswer,
@@ -249,8 +287,18 @@
                  txt:this.moveDom.textContent.slice(2)
                }
              );
              this.moveDom.style.display = "none";
              this.moveDom = null;
              if(this.drageQuestion[this.questionIndex].userAnswer[index]) {
                this.moveDom.style.display = "none";
                this.moveDom = null;
                this.$set(this.spaceList,index,{})
              }
            } else {
              if(this.isLift && this.moveDom) {
                // 在非空格区域抬起鼠标
                this.moveDom.style.position = "";
                this.moveDom.style.left = "0px";
                this.moveDom.style.top = "0px";
              }
            }
          }
        }
@@ -269,17 +317,17 @@
    getSpaceInfo(parentDom) {
      let arr = [];
      const list = parentDom.querySelectorAll(".space");
      
      for (let index = 0; index < list.length; index++) {
        const itemInfo = list[index].getBoundingClientRect();
        arr.push({
          minX: itemInfo.x -10,
          maxX: itemInfo.x + itemInfo.width + 10,
          minY: itemInfo.y -10 ,
          maxY: itemInfo.y + itemInfo.height + 10,
          minX: itemInfo.x,
          maxX: itemInfo.x + itemInfo.width,
          minY: itemInfo.y + 3 ,
          maxY: itemInfo.y + itemInfo.height,
        });
      }
      this.spaceList = arr;
      console.log("空格范围", arr);
    },
    // 获取父元素
    getParentWithClass(element, className) {
@@ -319,7 +367,6 @@
        item.isRight = JSON.stringify(arr)  == JSON.stringify(item.answer)
        item.isComplete = true
      }
      console.log(arr,this.drageQuestion[0]);
    },
    redio() {
      this.submitState = false
@@ -331,6 +378,7 @@
      for (let index = 0; index < this.drageQuestion.length; index++) {
        const item = this.drageQuestion[index];
        item.isComplete = false
        item.isRight = null
        for (let cindex = 0; cindex < item.option.length; cindex++) {
          const citem = item.option[cindex];
          arr.push(
@@ -342,7 +390,6 @@
        }
        item.userAnswer = arr
      }
      console.log(this.drageQuestion);
      const optionList = (
        this.container ? this.container : document
      ).querySelectorAll(".drag-option");
@@ -352,6 +399,7 @@
        item.style.top = null
        item.style.left = null
      }
      this.spaceList = []
    },
    seeAnswer() {
      for (let index = 0; index < this.drageQuestion.length; index++) {
@@ -390,6 +438,19 @@
        }
      }
    },
    // 显示对错方法
    getItemRight(num,number) {
      if(!this.submitState) return null
      let flag = null
      const item = this.question[num]
      console.log(item,num,number);
      const answer = item.answer[number]
      const userAns = item.userAnswer[number].value
      if(answer && userAns) {
        flag = answer == userAns
      } 
      return flag
    }
  },
};
</script>
@@ -404,8 +465,9 @@
.space {
  display: inline-block;
  text-align: center;
  min-width: 60px !important;
  min-height: 15px !important;
  min-width: 65px !important;
  height: 20px !important;
  text-indent: 0em;
}
.option-box {
  display: flex;
@@ -413,9 +475,16 @@
}
.drag-option {
  cursor: pointer;
  // border: 1px solid #e9e9e9;
  // border-radius: 18px;
  // padding: 6px;
}
.stem {
  text-indent: 2em;
  line-height: 2em;
}
.stem-box {
  display: inline-block;
}
.drag-bottom-btn {
  width: 100%;
@@ -495,7 +564,7 @@
          color: #ee1818;
          span {
            height: min-content;
            width: 100px;
            width: 115px;
          }
          .errorBox {
            width: 100px;