连线题，合并

闫增涛

2024-06-03 713e5f5c012eb510b768d4f75d6aa1e2631e649b

 src/components/matching/matching.vue

@@ -1,6 +1,6 @@
<template>
  <div class="connect" id="connect" ref="connect" @mouseup="mouseup">
    <div class="answer"    @mousemove="mousemove">
  <div class="connect" id="connect" ref="connect"  @mousemove="mousemove" @mouseup="(e) => touchend(e)">
    <div class="answer"    >
      <div class="answer-box">
        <div
          class="answer-box-item"
@@ -19,7 +19,6 @@
          v-for="(item, index) in rightArr"
          :key="index"
          ref="right"
          @mouseup="(e) => touchend(e, item, index)"
        >
          {{ item.label.txt }}
        </div>
@@ -57,6 +56,7 @@
      scrollTop: 0,
      debounce: false,
      checkItem: null,
      checkItemIndex:null
    };
  },
  props: {
@@ -149,8 +149,8 @@
      });
    },
    // 触摸结束
    touchend(e, item, index) {
      console.log("抬起", e,item);
    touchend(e, index) {
      console.log("抬起", e,this.checkItem);
      this.isDragging = false;
      if (this.item.showAnswer) {
        return false;
@@ -164,20 +164,20 @@
      this.canvasB.clearRect(0, 0, this.clientWidth, this.clientHeight);
      // 如果不是右边的dom 直接把 线 干掉 -- 证明不是 没有拖到右边上
      if (!right) {
        item.line = [];
        this.checkItem.line = [];
        return;
      }
      // 如果已有的不是我自己 直接替换掉上一个的
      if (item.value[0] !== right.index) {
      if (this.checkItem.value[0] !== right.index) {
        let model = this.leftArr.find((r) => r.value[0] === right.index);
        if (model) {
          model.value = [];
          model.line = [];
        }
        item.value = [right.index];
        this.checkItem.value = [right.index];
      }
      // 重新赋值 线的 x y 轴
      item.line = this.attachment(index, right.index);
      this.checkItem.line = this.attachment(this.checkItemIndex, right.index);
      this.drawing();
      let model = this.leftArr
        .map((r, i) => {
@@ -192,10 +192,11 @@
      console.log(JSON.stringify(model));
    },
    // 触摸开始
    touchstart(e, item) {
    touchstart(e, item,index) {
      this.isDragging = true;
      console.log("按下", e);
      this.checkItem = item
      this.checkItemIndex = index
      e.stopPropagation();
      // let event = e.targetTouches[0];
      item.line = [
@@ -219,7 +220,6 @@
    // 移动中
    mousemove(e) {
      if (!this.isDragging) return false;
      console.log("移动", e);
      if (this.item.showAnswer) {
        return false;
      }