微信小程序怎样实现拖拽image触摸事件监听

微信小程序可以使用触摸事件监听来实现拖拽image的功能，下面演示如何实现。

首先，在wxml文件中添加一个image标签，并设置id属性和bindtouchstart、bindtouchmove和bindtouchend属性，用于监听触摸事件，如下所示：

<image id="draggable" src="https://example.com/image.png" bindtouchstart="onDragStart" bindtouchmove="onDragging" bindtouchend="onDragEnd" />

接着，在对应的js文件中，编写onDragStart、onDragging和onDragEnd函数分别处理触摸开始、移动和结束事件。

Page({
  startX: 0,
  startY: 0,
  currentX: 0,
  currentY: 0,

  onDragStart: function(e) {
    this.startX = e.touches[0].clientX;
    this.startY = e.touches[0].clientY;
  },

  onDragging: function(e) {
    let dragable = wx.createSelectorQuery().select('#draggable');
    dragable.fields({ size: true }, function(res) {
      let width = res.width;
      let height = res.height;
      let left = e.touches[0].clientX - this.startX + this.currentX;
      let top = e.touches[0].clientY - this.startY + this.currentY;
      let right = left + width;
      let bottom = top + height;

      dragable.style({ left: ${left}px, top: ${top}px }).exec();
      this.currentX = left;
      this.currentY = top;
    }.bind(this));
  },

  onDragEnd: function() {
    this.startX = 0;
    this.startY = 0;
    this.currentX = 0;
    this.currentY = 0;
  },
})

接下来，解释如何实现上述函数。

首先，onDragStart函数监听触摸开始事件，记录触摸点的位置。

然后，onDragging函数监听触摸移动事件，通过wx.createSelectorQuery().select('#draggable')选择器获取拖拽元素的大小及位置信息，并计算元素移动后的位置。最后，使用selectQuery的style方法，更新拖拽元素的位置，同时记录当前元素的位置，以备下次移动时计算新的位置。

最后，onDragEnd函数监听触摸结束事件，清空移动相关的状态变量。

以上就是实现微信小程序拖拽image的触摸事件监听的全部代码。需要注意的是，如果需要在拖拽时限制元素的移动范围，可以对计算出的位置进行限制。