微信小程序 拖拽监听功能：
在软件开发或者 APP应用开发的时候，经常会遇到拖拽监听，最近自己学习微信小程序的知识，就想实现这样的拖拽效果，这里就记录下。
需要做个浮在scroll-view之上的button.尝试了一下.
上GIF:
Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.
1.index.wxml
../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bin
在微信小程序中，实现拖拽事件监听是一种常见的交互设计，特别是在构建用户界面时，例如创建可自定义位置的悬浮按钮。下面将详细讲解如何在微信小程序中实现这一功能。
拖拽监听功能的核心在于捕获用户的触摸动作，并在用户触摸屏幕时跟踪其手指的移动。在微信小程序中，我们可以利用`<image>`组件结合`bindtouchstart`, `bindtouchmove`和`bindtouchend`等触摸事件来实现这个功能。
1. **设置基础结构**：
- 在`index.wxml`文件中，创建一个`<image>`组件，为其绑定`bindtap`和`bindtouchmove`事件。`bindtap`用于处理点击事件，`bindtouchmove`则用于处理拖动事件。
```
<image src="../images/gundong.png" bindtap="ballClickEvent"
style="bottom:{{ballBottom}}px;right:{{ballRight}}px;"
bindtouchmove="ballMoveEvent"></image>
```
2. **处理触摸事件**：
- 在`index.js`文件中，初始化数据，如初始坐标、屏幕宽高等。在`onLoad`函数中，通过`wx.getSystemInfo`获取屏幕尺寸。
- 定义`ballMoveEvent`函数，处理拖动事件。在`bindtouchmove`事件中，可以获取到当前触摸点的`pageX`和`pageY`坐标。为了避免超出屏幕范围，需要对坐标进行边界检查。
- 将触摸点的坐标转换为元素的`right`和`bottom`属性值，更新数据。通过`setData`方法改变`ballBottom`和`ballRight`的值，使得`<image>`组件的坐标随之改变。
```javascript
ballMoveEvent: function (e) {
var touchs = e.touches[0];
var pageX = touchs.pageX;
var pageY = touchs.pageY;
// 边界检查
if (pageX < 30 || pageX > this.data.screenWidth - 30 ||
this.data.screenHeight - pageY <= 30 || pageY <= 30)
return;
// 计算right和bottom
var x = this.data.screenWidth - pageX - 30;
var y = this.data.screenHeight - pageY - 30;
this.setData({ballBottom: y, ballRight: x});
}
```
3. **样式设置**：
- 在`index.wxss`文件中，设置`<image>`组件的样式，使其绝对定位并设置`z-index`以确保其位于其他元素之上。
```css
image-style {
position: absolute;
bottom: 240px;
right: 100px;
width: 60px;
height: 60px;
z-index: 100;
}
```
4. **点击事件处理**：
- 同样在`index.js`中，定义`ballClickEvent`函数，处理点击事件，输出相关信息或执行相应的操作。
通过以上步骤，一个基本的拖拽监听实例就在微信小程序中实现了。用户可以自由地拖动屏幕上的`<image>`组件，同时还可以点击它。这个功能在开发过程中具有广泛的应用，例如自定义布局、创建可拖动的悬浮按钮等。理解并熟练运用触摸事件监听是微信小程序开发中的重要技能之一。
