touchmove(e) { console.log(this.$refs.dragToBox.$el,this.dom,'==',this.$refs.dragToBox.$el.offsetTop) if (this.canDrag && this.dom) { let picDom = this.$refs.dragPic.$el let picTop = picDom.offsetTop let picHeight = picDom.offsetHeight let picLeft = picDom.offsetLeft let picWidth = picDom.offsetWidth console.log('picDom:'+picDom,'picTop:'+picTop,'picHeight:'+picHeight,'picLeft:'+picLeft,'picWidth:'+picWidth) let boxDom = this.$refs.dragToBox.$el let boxHeight = boxDom.offsetHeight let boxWidth = boxDom.offsetWidth let boxTop = boxDom.offsetTop let boxLeft = boxDom.offsetLeft console.log('boxDom:'+boxDom,'boxHeight:'+boxHeight,'boxWidth:'+boxWidth,'boxTop:'+boxTop,'boxLeft:'+boxLeft) let to = this.dom let toH = to.offsetHeight let toW = to.offsetWidth let toPageH = e.touches[0].pageY - toH / 2 - boxTop let toPageW = e.touches[0].pageX - toW / 2 - boxLeft console.log('to:'+to,'toH:'+toH,'toW:'+toW,'toPageH:'+toPageH,'toPageW:'+toPageW) if(!this.el.enterPic && (picHeight + picTop - 38) > toPageH) { this.el.enterPic = true } if (!this.item.child[this.index + 1]) { this.item.child[this.index + 1] = { isMove: false, enterPic: false, left: 0, top: 0 } this.sqArr = Object.assign([], this.sqArr) } this.el.isMove = true if (toPageH >= 0 && ((this.el.enterPic && toPageH <= picHeight) || (!this.el.enterPic)) && toPageH <= window.innerHeight - toH) { this.el.top = `${((toPageH * 100) / boxHeight)}%` // this.el.top = toPageH + 'px' } if (toPageW >= picLeft && toPageW <= (picLeft + picWidth-toH) && toPageW <= window.innerWidth - toW) { // this.el.left = toPageW + 'px' this.el.left = `${(toPageW * 100) / boxWidth}%` } } },

这段代码是一个 `touchmove` 事件的处理函数。在移动触摸过程中，根据触摸点的位置和元素的尺寸，计算并更新元素的位置。

首先，获取了一些元素的引用和尺寸信息，比如 `picDom` 表示一个名为 `dragPic` 的元素，`boxDom` 表示一个名为 `dragToBox` 的元素。

然后，根据触摸点的位置和元素的尺寸，计算了一些值，如 `toPageH` 表示触摸点相对于某个元素的垂直位置，`toPageW` 表示触摸点相对于某个元素的水平位置。

根据这些计算出来的值，更新了元素的位置信息，如 `this.el.top` 和 `this.el.left` 分别表示元素的垂直和水平位置。

最后，根据一些条件判断，更新了一些状态变量，如 `this.el.isMove` 表示元素是否正在移动，`this.el.enterPic` 表示元素是否进入了特定条件下。

整个代码逻辑是基于触摸点位置和元素尺寸的计算和判断，实现了元素的拖拽效果。

相关问题

this.$refs.genjin.touchmove.stop.prevent

根据您提供的信息，这是一个关于 u-popup 组件中 touchmove 事件的问题。在 uview2.0 中，u-popup 组件默认会阻止 touchmove 事件的传递，以避免在弹出层内部产生滚动条的问题。但是，如果您需要在弹出层内部实现自定义的 touchmove 行为，可以通过以下方式来解决：

1. 在 u-popup 的属性中添加 prevent="false"，以允许 touchmove 事件传递到弹出层内部。

2. 在弹出层的组件中，通过代码实现 touchmove 行为，并使用 stopPropagation() 和 preventDefault() 方法来阻止 touchmove 事件传递到 u-popup 组件。

示例代码如下：

<template>
  <u-popup prevent="false">
    <div ref="content" @touchmove="onTouchMove">
      <!-- 弹出层内容 -->
    </div>
  </u-popup>
</template>

<script>
export default {
  methods: {
    onTouchMove(event) {
      // 阻止 touchmove 事件传递到 u-popup 组件
      event.stopPropagation();
      event.preventDefault();

      // 实现自定义的 touchmove 行为
      // ...
    }
  }
}
</script>

希望这个解答能够帮到您。如果还有其他问题，请随时提出。

touchmove.stop.prevent用法完整示例

touchmove.stop.prevent是Vue.js中常用的事件修饰符，用于阻止touchmove事件的默认行为和事件冒泡。

以下是一个完整的示例：

<template>
  <div
    class="container"
    @touchmove.stop.prevent="onTouchMove"
  >
    <div class="inner"></div>
  </div>
</template>

<script>
export default {
  methods: {
    onTouchMove(event) {
      // 阻止touchmove事件的默认行为
      event.preventDefault();

      // 阻止事件冒泡
      event.stopPropagation();

      // 其他逻辑处理
      console.log('touchmove事件被阻止了');
    }
  }
}
</script>

<style>
.container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  overflow: auto;
}

.inner {
  width: 500px;
  height: 500px;
  background-color: #f0f0f0;
}
</style>

在上面的示例中，我们用@touchmove.stop.prevent修饰符来监听div元素上的touchmove事件，并且调用onTouchMove方法来处理事件。在onTouchMove方法中，我们通过event.preventDefault()来阻止touchmove事件的默认行为，通过event.stopPropagation()来阻止事件冒泡。最后，我们在控制台输出了一条日志，用于验证touchmove事件是否被成功阻止了。