艺术戏剧（bug解决）

zhongshujie

2024-09-09 f77e02b69e4512f00251929b14888f3e6bbac37f

 src/components/dragQuestion/index.vue

@@ -1,5 +1,33 @@
<template>
  <div class="drag-box">
  <div class="drag-box" :style="{ borderColor: bcColor }">
    <div class="title-box">
      <p class="text rhombusFather" style="text-indent: 2em !important">
        <span class="hs1 rhombus">◇</span>{{ titileText }}
      </p>
      <span
        class="svg-btn t0"
        @mouseenter="mouseenterTitle"
        @mouseleave="mouseleaveTitle"
      >
        <p class="p-title" v-if="ishowTitle">请拖拽答案到括号里吧</p>
        <svg
          t="1719309984490"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6316"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="20"
          height="20"
        >
          <path
            d="M510.66571776 2.32285525c281.13999758 0.03143566 510.59693795 229.62226973 510.04273323 510.34079346-0.55769771 281.76056661-229.64788451 510.68426013-510.37339307 509.99849074-281.55681565-0.68693447-509.37908565-228.64309817-509.75166009-510.05321216C0.20965945 231.71226624 229.53852701 2.29141959 510.66571776 2.32285525zM972.54389419 512.41565298C972.50314354 258.01834837 766.47298389 51.25351879 510.91837042 50.72958578c-254.73844338-0.52160398-461.85256163 206.22576071-462.11918507 461.70003911-0.26545949 254.42175431 206.44814165 460.98865493 461.56614428 461.71517497C764.4715611 974.86899086 972.5846437 766.95849529 972.54389419 512.41565298zM539.07335282 677.31941831c-21.78046749 0-42.9799515 0-64.78370475 0 0-12.93997511-0.69159139-25.64243456 0.14553657-38.24359993 1.68939179-25.44566841 7.57490347-49.85162069 20.87115321-72.0221275 10.34708992-17.25368889 23.52341675-32.14269326 38.16209863-45.82548935 18.18046691-16.99288633 36.5774939-33.76688469 54.39702926-51.13118151 10.49262649-10.22367517 19.81863026-21.62794496 24.66675485-35.82070101 11.61384277-34.00090851 4.18913394-64.36339485-18.43079054-91.405312-37.56481536-44.90802403-100.39250489-46.44605838-138.86663567-23.96934258-24.24993792 14.16597845-38.78965362 35.84282283-47.27736433 61.9113893-3.80491662 11.68719417-6.43273045 23.75744057-9.84295083 36.5856438-22.35912192-2.65459257-45.24566983-5.3720576-68.99030357-8.19081558 0.88602851-5.92276935 1.52056946-11.49159197 2.57425635-16.9800795 5.91229042-30.78861824 16.59935403-59.50246343 36.69741568-84.13079666 24.48396061-30.00271872 56.38215225-47.47180259 93.95744654-54.68344547 39.22044359-7.527168 78.41527125-6.71448974 116.55641316 5.67360967 48.83402752 15.86002717 84.96908857 46.85006848 101.39030641 96.21501497 15.76571904 47.39379427 8.01966421 92.16443165-23.01345564 132.15913187-19.68590051 25.37115307-44.16869717 45.98383275-67.17633194 68.0751673-10.12121714 9.71837099-20.36119211 19.49728541-29.15278394 30.3741292-13.05873294 16.15459442-18.04308025 35.69262933-19.61720718 56.12134969C540.4507136 653.56547072 539.84644437 665.12226418 539.07335282 677.31941831zM470.0818853 814.35345351c0-25.59353401 0-50.94023737 0-76.69910073 25.64359851 0 50.98447986 0 76.7526582 0 0 25.51552569 0 50.86921501 0 76.69910073C521.33997454 814.35345351 495.85239154 814.35345351 470.0818853 814.35345351z"
            p-id="6317"
          ></path>
        </svg>
      </span>
    </div>
    <div
      v-for="(item, index) in drageQuestion"
      :key="item.id"
@@ -14,14 +42,61 @@
          <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>

      <!-- 选项 -->
      <ul class="option-box">
        <li v-for="(citem, cindex) in item.option" :key="cindex">
          <span class="drag-option" @mousedown="mousedown" v-show="item.userAnswer.findIndex(eitem => eitem.value == citem.value) == -1"
          <span
            class="drag-option"
            @mousedown="mousedown"
            v-show="
              item.userAnswer.findIndex(
                (eitem) => eitem.value == citem.value
              ) == -1
            "
            >{{ citem.value }}、{{ citem.txt }}</span
          >
        </li>
@@ -30,7 +105,6 @@
      <div class="analysis" v-if="item.isComplete">
        <el-collapse
          v-model="item.isUnfold"
          @change="handleChange(item)"
          accordion
          v-if="item.questionType != 'shortAnswer'"
        >
@@ -55,14 +129,20 @@
                    style="margin-left: 20px"
                  >
                    <span>您的答案：</span>
                    <span
                      class="errorBox"
                      v-if="item.userAnswer.length"
                    <span class="errorBox" v-if="item.userAnswer.length">
                      <span
                        v-for="(answerItem, answerIdnex) in item.userAnswer"
                        :key="answerIdnex"
                        >{{ answerItem.value
                        }}<span
                          v-if="
                            answerIdnex !== item.userAnswer.length - 1 &&
                            answerItem.value
                          "
                          >,</span
                        ></span
                      >
                      <span v-for="(answerItem,answerIdnex) in item.userAnswer" :key="answerIdnex">{{answerItem.value}}<span v-if="answerIdnex !== item.userAnswer.length - 1 && answerItem.value">,</span></span>
                      
                      </span
                    >
                    </span>
                  </p>
                </div>
                <p class="difficulty" v-if="item.difficulty">
@@ -76,7 +156,7 @@
                  />
                </p>
                <!-- 正确错误图标 -->
                <span class="mr-10 judge-icon">
                <!-- <span class="mr-10 judge-icon">
                  <svg
                    v-if="item.isRight"
                    t="1716986419862"
@@ -113,7 +193,7 @@
                      p-id="25746"
                    ></path>
                  </svg>
                </span>
                </span> -->

                <div class="headerConent sitgBox">
                  <p v-if="!item.isUnfold">
@@ -153,15 +233,23 @@
    page: {
      type: Number,
    },
    bcColor: {
      type: String,
      default: "#8fae34",
    },
    titileText: {
      type: String,
      default: "阅读下面的文字，为小蚂蚁选择一种性格吧。",
    },
  },
  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++) {
            // 旧答案赋值
@@ -193,65 +281,79 @@
      maxX: null,
      maxY: null,
      spaceList: [],
      submitState:false,
      isLift:false
      submitState: false,
      isLift: false,
      ishowTitle: false,
    };
  },
  mounted() {
    console.log("传值", this.question);
  },
  mounted() {},
  methods: {
    // 1.选项拖拽
    // 2.限制拖拽移动只能在题范围内
    // 3.限制鼠标松开要在空格的范围内
    mousedown(e) {
      e.preventDefault();
      if(this.submitState) return false
      this.isLift = false
      console.log("鼠标按下", e);
      if (this.submitState) return false;
      this.isLift = false;
      this.moveDom = e.toElement;
      this.parentDom = this.getParentWithClass(e.toElement, "question-box");
      this.questionIndex = this.parentDom.getAttribute("num");
      if(!this.spaceList.length) 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) {
      if (this.isLift) {
        this.moveDom.style.position = "";
        this.moveDom.style.left = "0px";
        this.moveDom.style.top = "0px";
      }
      if (!this.moveDom) return false;
      this.moveDom.style.position = "absolute";
      // 限制在此题范围内拖动
      if (e.x <= this.maxX && e.y < this.maxY) {
        const moveX = e.x - this.parentX;
        const moveY = e.y - this.parentY;
        const moveY = e.y - this.parentY + 40;
        this.moveDom.style.left = moveX + "px";
        this.moveDom.style.top = moveY + "px";
        // 如果移动到空格范围内,将答案填入空格
        this.moveDom.style.zIndex = "99999999";
        // 如果还有有空格
        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.spaceList = this.spaceList.filter(citem => citem !== item)
              // 如果移动到空格范围内,且鼠标抬起后,将答案填入空格,并将该空格的数据清空(空格不能删除,只能清空,否则导致数组索引改变,不能正确写入到指定空格中)
              if (!this.isLift) return false;
              this.$set(
                this.drageQuestion[this.questionIndex].userAnswer,
                index,
                {
                  value:this.moveDom.textContent.charAt(0),
                  txt:this.moveDom.textContent.slice(2)
                  value: this.moveDom.textContent.charAt(0),
                  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";
              }
            }
          }
        }
@@ -261,26 +363,24 @@
    mouseup(e) {
      if (this.moveDom) {
        // this.moveDom = null;
        
      }
      this.isLift = true
    
      this.isLift = true;
    },
    // 获取题目空格坐标
    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) {
@@ -308,51 +408,49 @@
    },
    // 提交
    submitData() {
      this.submitState = true
      this.submitState = true;
      let arr = [];
      const data = this.drageQuestion;
      for (let index = 0; index < data.length; index++) {
        const item = data[index];
        for (let cindex = 0; cindex < item.userAnswer.length; cindex++) {
          let citem = item.userAnswer[cindex];
          arr[cindex] = citem.value
          arr[cindex] = citem.value;
        }
        item.isRight = JSON.stringify(arr)  == JSON.stringify(item.answer)
        item.isComplete = true
        item.isRight = JSON.stringify(arr) == JSON.stringify(item.answer);
        item.isComplete = true;
      }
      console.log(arr,this.drageQuestion[0]);
    },
    redio() {
      this.submitState = false
      this.submitState = false;
      localStorage.removeItem(
        this.config.activeBook.name + "-drag-" + this.page
      );
      let arr = []
      let arr = [];
      // const data = []
      for (let index = 0; index < this.drageQuestion.length; index++) {
        const item = this.drageQuestion[index];
        item.isComplete = false
        item.isComplete = false;
        item.isRight = null;
        for (let cindex = 0; cindex < item.option.length; cindex++) {
          const citem = item.option[cindex];
          arr.push(
            {
              txt:'',
              value:''
            }
          )
          arr.push({
            txt: "",
            value: "",
          });
        }
        item.userAnswer = arr
        item.userAnswer = arr;
      }
      console.log(this.drageQuestion);
      const optionList = (
        this.container ? this.container : document
      ).querySelectorAll(".drag-option");
      for (let index = 0; index < optionList.length; index++) {
        const item = optionList[index];
        item.style.position = null
        item.style.top = null
        item.style.left = null
        item.style.position = null;
        item.style.top = null;
        item.style.left = null;
      }
      this.spaceList = [];
    },
    seeAnswer() {
      for (let index = 0; index < this.drageQuestion.length; index++) {
@@ -391,6 +489,27 @@
        }
      }
    },
    // 显示对错方法
    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;
    },
    mouseenterTitle() {
      this.ishowTitle = true;
      console.log(this.ishowTitle);
    },
    mouseleaveTitle() {
      this.ishowTitle = false;
      console.log(this.ishowTitle);
    },
  },
};
</script>
@@ -400,13 +519,17 @@
  text-indent: 0 !important;
}
.drag-box {
  box-sizing: border-box;
  position: relative;
  border: 1px solid;
  padding: 10px;
  border-radius: 10px;
}
.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 {
@@ -415,10 +538,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%;
@@ -444,6 +573,40 @@
.el-collapse {
  width: 100%;
}
.svg-btn {
  position: relative;
  margin-left: 5px;
  max-height: 20px;
  cursor: pointer;
  display: flex;
  padding: 3px;
  fill: #fff;
  border: 1px solid #8fae34;
  border-radius: 5px;
  background-color: #8fae34;
  &:hover {
    fill: #8fae34;
    background-color: #fff;
  }
}
.p-title {
  text-indent: 0 !important;
  position: absolute;
  top: -33px;
  background-color: #8fae34;
  padding: 0 4px;
  white-space: nowrap;
  border-radius: 4px;
  color: #fff;
}
.title-box {
  display: flex;
  margin-bottom: 20px;
  p {
    margin: 0;
    text-indent: 2em;
  }
}
/** 解析 */
.objective {
  /deep/ .el-collapse-item__header {