首页 / 脚本样式 / JavaScript / 微信小程序 实现拖拽事件监听实例详解

微信小程序 拖拽监听功能：
        在软件开发或者 APP应用开发的时候，经常会遇到拖拽监听，最近自己学习微信小程序的知识，就想实现这样的拖拽效果，这里就记录下。
需要做个浮在scroll-view之上的button.尝试了一下.

上GIF:


Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.
1.index.wxml

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

简单的设置一张图片,添加触摸事件监听.点击事件监听.根据触摸事件获取X Y位移,设置为image的位置
2.index.js

//index.js //获取应用实例 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>//获取屏幕宽高 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（"x: " + x） console.log（"y: " + y） this.setData（{ballBottom: y,ballRight: x }）;}, 

//点击事件ballClickEvent: function （） { console.log（"点击了...."）} }） 

3.index.wxss

这里需要设置z-index

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