微信小程序简单组件拖拽

背景

近期正在参与自主学习微信小程序的开发工作；作为一名完全没有前端基础的学习者，我查阅了大量关于微信小程序中拖拽功能实现的相关资料，发现多数方案要么实现过程过于繁琐，要么所使用的组件封装复杂，并且常常附加了拖拽后排序等额外功能；因此，我决定撰写一篇个人认为最易于理解的微信小程序元素拖拽实现方法。

原理

本方案通过调用微信小程序提供的 bindtouchstart、bindtouchmove、bindtouchend 三个事件处理函数，分别用于捕捉用户触摸屏幕的起始动作、滑动过程以及结束操作，并结合坐标系转换技术，从而完成基础的拖拽交互功能。

第一步 touchStart

拖拽操作的起始阶段（所有信息均以图示呈现）

控件的定位参数为 left:posX; top:posY;

通过调用 bindtouchstart 接口，可获取初始触摸点的坐标信息：touch.pageY; touch.pageX;

在这一阶段，能够计算出触摸点与控件原始位置之间的坐标差值：

chaX = touch.pageX - posX;

chaY = touc