The WeChat applet implements the detailed description of the drag event listening instance, and the applet drag

Small Program Implementation drag event listening instance details, small program drag

The drag and drop listening function of the Applet:

During software development or APP development, you may often encounter drag-and-drop listening. Recently, I learned the knowledge of small programs and want to achieve this drag-and-drop effect. Here I will record it.

You need to create a button floating above scroll-view. I tried it.

On GIF:

There will also be operations similar to mobile controls in Android. The idea is similar. Get the x y variable of the displacement and Set coordinates for the control.

1. index. wxml

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

Simply set an image and add a touch event listener. Click Event listener. Obtain the x y displacement based on the touch event and set it to the image location.

2. index. js

// Index. js // obtain the application instance var app = getApp () Page ({data: {ballBottom: 240, ballRight: 120, screenHeight: 0, screenWidth: 0,}, onLoad: function () {[javascript] view plain copy <span style = "white-space: pre"> </span> // obtain the screen width and height var _ this = this; wx. getSystemInfo ({success: function (res) {_ this. setData ({screenHeight: res. optional wheight, screenWidth: res. required wwidth,}) ;}}) ;}, ballMoveEvent: function (e) {console. log ('I have been dragged .... ') var touchs = e. touches [0]; var pageX = touchs. pageX; var pageY = touchs. pageY; console. log ('pagex: '+ pageX) console. log ('pagey: '+ pageY)

// Prevents the coordinates from crossing the border. Generally, if (pageX <30) return; if (pageX> this. data. screenWidth-30) return; if (this. data. screenHeight-pageY <= 30) return; if (pageY <= 30) return;

// Use right and bottom here. therefore, you need to convert pageX pageY to var x = this. data. screenWidth-pageX-30; var y = this. data. screenHeight-pageY-30; console. log ('x: '+ x) console. log ('y: '+ y) this. setData ({ballBottom: y, ballRight: x });},

// Click Event ballClickEvent: function () {console. log ('clicked ....')}})

3. index. wxss

Set z-index

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