Introduction to the implementation method of dragging image touch event monitoring in WeChat applet

This article mainly introduces the relevant information on the example of WeChat applet implementing drag and drop image touch event monitoring. Here is a simple example of image touching and monitoring. Friends in need can refer to it

Example of WeChat applet implementing drag and drop image touch event monitoring

You need to make a button floating on the scroll-view. I tried it.

Implementation renderings ：

There will also be operations similar to moving controls in Android. The idea is similar. Get the X Y variables of the displacement and set the coordinates for the control.

1.index.wxml

<image class="image-style" src="../../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">  
</image>

Simple set up a picture, add touch event listener. Click event listener. Get X Y based on touch event Displacement, set to the position of the image

2.index.js

##

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  ballBottom: 240, 
  ballRight: 120, 
  screenHeight: 0, 
  screenWidth: 0, 
 }, 
 onLoad: function () { //获取屏幕宽高 
  var _this = this; 
  wx.getSystemInfo({ 
   success: function (res) { 
    _this.setData({ 
     screenHeight: res.windowHeight, 
     screenWidth: res.windowWidth, 
    }); 
   } 
  }); 
 }, 
 ballMoveEvent: function (e) { 
  console.log('我被拖动了....') 
  var touchs = e.touches[0]; 
  var pageX = touchs.pageX; 
  var pageY = touchs.pageY; 
  console.log('pageX: ' + pageX) 
  console.log('pageY: ' + pageY) 

//防止坐标越界,view宽高的一般 
  if (pageX < 30) return; 
  if (pageX > this.data.screenWidth - 30) return; 
  if (this.data.screenHeight - pageY <= 30) return; 
  if (pageY <= 30) return; 

//这里用right和bottom.所以需要将pageX pageY转换 
  var x = this.data.screenWidth - pageX - 30; 
  var y = this.data.screenHeight - pageY - 30; 
  console.log(&#39;x: &#39; + x) 
  console.log(&#39;y: &#39; + y) 
  this.setData({ 
   ballBottom: y, 
   ballRight: x 
  }); 
 }, 

//点击事件 
 ballClickEvent: function () { 
  console.log(&#39;点击了....&#39;) 
 } 
})

3.index. wxss

Z-index needs to be set here

.image-style{ 
 position: absolute; 
 bottom: 240px; 
 right: 100px; 
 width: 60px; 
 height: 60px; 
 z-index: 100; 
}

The above is the detailed content of Introduction to the implementation method of dragging image touch event monitoring in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!