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

小程序自带拖拽组件

#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(￣▽￣)ブ