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` 表示元素是否进入了特定条件下。

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

相关问题

// draggable.js import { onMounted, onBeforeUnmount } from 'vue' export default { mounted(el) { console.log('el',el) el.setAttribute('draggable', true) let startX, startY, initialLeft, initialTop, currentX, currentY const onDragStart = (e) => { console.log('e',e.preventDefault()) e.stopPropagation() // e.preventDefault() startX = e.clientX || e.touches[0].clientX startY = e.clientY || e.touches[0].clientY initialLeft = el.offsetLeft initialTop = el.offsetTop el.classList.add('dragging') } const onDrag = (e) => { e.stopPropagation() currentX = (e.clientX || e.touches[0].clientX) - startX currentY = (e.clientY || e.touches[0].clientY) - startY el.style.left = `${initialLeft + currentX}px` el.style.top = `${initialTop + currentY}px` } const onDragEnd = (e) => { e.stopPropagation() el.classList.remove('dragging') } el.addEventListener('dragstart', onDragStart) el.addEventListener('drag', onDrag) el.addEventListener('dragend', onDragEnd) el.addEventListener('touchstart', onDragStart) el.addEventListener('touchmove', onDrag) el.addEventListener('touchend', onDragEnd) onMounted(() => { el.classList.add('draggable') }) onBeforeUnmount(() => { el.removeEventListener('dragstart', onDragStart) el.removeEventListener('drag', onDrag) el.removeEventListener('dragend', onDragEnd) el.removeEventListener('touchstart', onDragStart) el.removeEventListener('touchmove', onDrag) el.removeEventListener('touchend', onDragEnd) el.classList.remove('draggable') el.classList.remove('dragging') }) } } 为什么拖拽时会出现虚影,残影, 怎么解决这个问题

出现拖拽时的虚影、残影问题，是因为浏览器默认会在拖拽时添加一个半透明的影像，以便用户可以清楚地看到拖拽的对象和目标位置。这个影像在拖拽结束后会自动消失。

您可以尝试在dragstart事件中调用setData方法来阻止浏览器默认的影像行为，例如：

const onDragStart = (e) => {
  e.stopPropagation();
  e.dataTransfer.setData('text/plain', ''); // 阻止浏览器默认影像
  startX = e.clientX || e.touches[0].clientX;
  startY = e.clientY || e.touches[0].clientY;
  initialLeft = el.offsetLeft;
  initialTop = el.offsetTop;
  el.classList.add('dragging');
};

此外，您还可以在CSS中使用`-webkit-user-drag: none;`来阻止元素的默认拖拽效果，例如：

.draggable {
  -webkit-user-drag: none;
  user-select: none;
}

请注意，这种方法可能会影响到元素的交互性，因此需要谨慎使用。

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>

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