近些日子,遇到了一个需求,就是一个红包组件,需要可以整个屏幕拖拽,实现后整理了如下资料

小程序自带拖拽组件

#movable-area(父容器) # movable-view (移动容器)

这两个组件要配合使用才行,
解释一下 :
movable-area 相当于是一个区域容器,只有在 movable-area覆盖的区域才能移动！！！,
movable-view 就是移动容器,实际拖拽移动的距离就是它在移动,把你要移动的内容放在movable-view里面就可

实际代码结构是这样的 :

   /wxml<movable-area class="" style="width: 75vw;height:67vh;position: fixed;top:100rpx ;left: 0;z-index: 9;">   <movable-view style="" x="{{250}}" y="{{450}}" direction="all"> //x 和 y 代表初始位置  direction可移动的方向 all为 垂直水平都可以      // 你要移动的视图放这里  </movable-view></movable-area>

只需设置好movable-area的大小覆盖区域, 就可随意拖拽,

这里说一下小程序写拖拽的坑;

坑1 : 卡慢

假如你是从web转过来小程序,你可能会觉得,小程序的拖拽也跟web一个样,给目标来个监听事件,获取响应的 X Y 的位移值,而后赋值给 目标容器, 这种方法尽管可行, 也最浅显易懂,

但是!!!! 别不记得了,小程序没有dom 这一种东西, 并且 小程序 是有性能限制的,你使用了这种方法后，拖拽会非常卡，卡到爆那种； 为什么呢？
当你不断的获取XY坐标值进行 赋值, 在setData的时候,就会出现性能问题,move事件一秒钟会触发屡次,那你就必需一秒钟setData屡次,这样就违反了小程序的规则了,
只需懂点小程序的都知道 小程序中setData是有性能消耗问题的,不能大量进行setData;
聪明的小伙伴都知道 小程序官方 是建议小程序中不要频繁的setData,以及data无关数据的冗余。
下面是小程序官方原话

setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口

所以不要使用这种方法

坑2： 遮罩层下的点击事件无效

当你用 movable覆盖完一个区域后，你会发现，处于 movable下的元素都无法点击了，无法触发点击事件， 为啥子咧？

是一个很简单的起因，你的 movable覆盖在 目标元素上面，你点击的时候只会触发到 movable的事件函数，是不会触发 movable下面的 元素的。
那怎样处理呢？事件传递？事件冒泡？事件委托？都不用！！！！！
只要要几行 css 代码就搞定了

/* css 写法*/  movable-area {   pointer-events: none; }movable-view {    pointer-events: auto; }

/*less*/ movable-area {   pointer-events: none;    movable-view {        pointer-events: auto;     } }

给movable-area 加个 pointer-events：none;
movable-view 加给pointer-events：auto；就行了
至于pointer-events 是什么意思的话？
我给出这样的解答
来自 MDN

pointer-events CSS属性 指定在什么情况下 (假如有) 某个特定的图形元素可以成为鼠标事件的 target。

到这里你应该就学会小程序movable的拖拽了，我也不多说了，有疑问欢迎在下面提问；
o(￣▽￣)ブ