微信小程序实现拖拽 image 触摸事件监听
1. 引言
在许多移动应用和网页中，拖放已成为一种常见的交互方式。在微信小程序中，也可以通过触摸事件实现拖拽操作。本文将介绍如何通过微信小程序的触摸事件来实现拖拽 image。
2. 实现拖拽 image
2.1 页面结构
首先，我们需要在 wxml 文件中定义一个 image，并将其作为拖动元素，如下所示：
<view class='container'>
<image src='{{imgSrc}}' mode='aspectFit' class='drag-item' id='dragImg' />
</view>
其中，imgSrc 表示图片的路径，mode 为图片的缩放模式，id 为元素的标识符。
同时，必须为该元素添加样式，以便后续定义其拖动行为。具体可见以下代码：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
margin-top: 30rpx;
overflow: hidden;
}
.drag-item {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 120rpx;
height: 120rpx;
border-radius: 50%;
overflow: hidden;
}
其中，container 为元素容器，drag-item 为拖动元素。实现的效果为：图片在父元素中居中显示，包裹在圆形容器内。
2.2 触摸事件监听
触摸事件指用户触摸屏幕时产生的一系列事件，如 touchstart、touchmove、touchend、touchcancel 等。在微信小程序中，我们可以通过 wx.createSelectorQuery() 方法来获取元素节点，并调用它的方法 on() 来注册触摸事件。
以下代码演示了如何监听 touchmove 事件，并实现拖动效果：
var startX;
var startY;
var offsetX = 0;
var offsetY = 0;
wx.createSelectorQuery().select('#dragImg').on('touchstart', function (e) {
startX = e.changedTouches[0].clientX;
startY = e.changedTouches[0].clientY;
}).on('touchmove', function (e) {
var clientX = e.changedTouches[0].clientX;
var clientY = e.changedTouches[0].clientY;
offsetX = clientX - startX;
offsetY = clientY - startY;
startX = clientX;
startY = clientY;
this.setData({
left: this.data.left + offsetX,
top: this.data.top + offsetY
})
}).on('touchend', function (e) {
offsetX = 0;
offsetY = 0;
}).on('touchcancel', function (e) {
offsetX = 0;
offsetY = 0;
}).exec()
该代码定义了四个变量：
- startX、startY：表示触摸起始位置的横纵坐标；
- offsetX、offsetY：表示拖拽时位移的横纵距离。
在 touchstart 事件中，获取起始位置的坐标，并将其赋给 startX 和 startY。在 touchmove 事件中，计算本次移动的距离，并根据元素原有的 left 和 top 值，加上位移值更新元素的位置，从而实现拖动效果。最后，在 touchend 和 touchcancel 事件中，将位移值重置为 0。
需要注意的是，当拖动元素被遮盖时，需要设置其 z-index 属性，以使其在 z 轴上位于更高层级。
3. 小结
本文简要介绍了如何通过微信小程序的触摸事件来实现拖拽 image。通过监听 touchstart、touchmove、touchend、touchcancel 事件，计算拖动时的位移，并更新元素位置，最终实现了拖动效果。在实现时，应注意元素的容器、元素的样式和z-index 属性的设置。