| | |
|---|
| | | <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" |
|---|
| | |
|---|
| | | v-for="(item, index) in rightArr" |
|---|
| | | :key="index" |
|---|
| | | ref="right" |
|---|
| | | @mouseup="(e) => touchend(e, item, index)" |
|---|
| | | > |
|---|
| | | {{ item.label.txt }} |
|---|
| | | </div> |
|---|
| | |
|---|
| | | scrollTop: 0, |
|---|
| | | debounce: false, |
|---|
| | | checkItem: null, |
|---|
| | | checkItemIndex:null |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 触摸结束 |
|---|
| | | 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; |
|---|
| | |
|---|
| | | 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) => { |
|---|
| | |
|---|
| | | }; |
|---|
| | | }) |
|---|
| | | .filter((r) => r.right !== undefined); |
|---|
| | | this.$emit("input", model); |
|---|
| | | // this.$emit("input", model); |
|---|
| | | this.item.userChoise = model; |
|---|
| | | console.log(JSON.stringify(model)); |
|---|
| | | // 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 = [ |
|---|
| | |
|---|
| | | // 移动中 |
|---|
| | | mousemove(e) { |
|---|
| | | if (!this.isDragging) return false; |
|---|
| | | console.log("移动", e); |
|---|
| | | if (this.item.showAnswer) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | // let event = e.targetTouches[0]; |
|---|
| | | console.log('移动',e); |
|---|
| | | this.checkItem.line[2] = e.pageX; |
|---|
| | | this.checkItem.line[3] = |
|---|
| | | e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop; |
|---|
