uniapp-自定义拖动布局

—使用前必看—

本篇文章主要内容是实现在两个相同大小(宽高)下进行位置拖动摆放，以及对其他物体摆放位置造成偏移位置的功能效果，但是目前还只能在两个宽高一样的物体进行拖动。

本人耗时一天写出来的拖动摆放功能，目前bug还是有比较多需要完善的。大家可以作为一个思路参考。

—效果—

—代码—

—逻辑代码思路—

1. 拖动：通过使用判断当前点击屏幕时相对左上角的点去进行x y轴的定位。通过公式：*坐标值(默认单位px)2 - 当前物体宽或高(默认单位rpx)/2。一般 px 是 rpx 的两倍，通过这个得出上面的公式。
2. 阴影固定：通过每一次拖动时发生位移，设置位移到一个固定范围内将位置移到一个固定位置，也就是说当前松开拖动的物体时物体坐标将锁定在阴影的位置上。实现一个锁定功能可以方便看到当前拖动的物体已拖动到哪个位置上。
3. 物体拖动碰撞：通过提前把每个物体的坐标位置放在数组中，当一个物体发生位移时除去自身的位置去判断当前移动到的下一个位置是否有物体存在。通过这个方法判断出当下一个移动位置有物体时将碰撞到的物体使它发生位移。

—目前问题—

• 目前逻辑代码在拖动物体碰撞使碰撞物体发生位移时，只能在两个相同大小(宽高)下去进行完成。
• 当拖动物体发生碰撞时在向下移动的时候，虽然可以将当前高度增加。但它无法还原(意思就是最下面没有物体的时候不会恢复原来的样子)。
• 代码相对来说比较繁杂没有进行封装成方法处理，代码上的逻辑比较复杂不容易看懂。

—思路演变—

本人一开始在想如何实现这种效果的时候，首先想到的是通过css的浮动去实现，通过改变当前的位置来达到物体上的拖动，在两个物体上的碰撞先是通过上面位置拖动去改变，但是发现还有有问题，以为值都是直接赋在物体的宽高上面。后面才发现通过把所有物体的坐标放在一个数组里面，通过拖动某一个物体的时去判断当前拖动位置上是否有物体存在。类似于将这个拖动物体与所有物体的坐标加上宽高的这么一个范围去判断是否有在这个区域内。

—源码位置—

后面有更新的话会在这个里面更新~

如果有想和我一起把这个功能完善的小伙伴也可以私信找我哦~

gitee地址：https://gitee.com/mehao123/move-demo