Implementation of drag-and-drop event listening instances in WeChat applets

This article mainly introduces detailed information about how to implement drag-and-drop event listening instances for applets. this method is used in many applications or software development, here we will introduce the implementation of this function by using applets. For more information, see the following article, this method is used in the development of many applications or software. here we will introduce the implementation of this function for small programs. For more information, see

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:

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

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 // 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; }

For more details about how small programs implement drag-and-drop event listening instances, please follow the PHP Chinese network!