小程序拖拽功能实现,以及无法点击的bug

近些日子,遇到了一个需求,就是一个红包组件,需要可以整个屏幕拖拽,实现后整理了如下资料 小程序自带拖拽组件 #movable-area(父容器) # movable-view (移动容器) 这两个组件要配合使用才行, 解释一下 : movable-area 相当于是一个区域容器,只有在 movable-area覆盖的区域才能移动！！！, movable-view 就是移动容器,实际拖拽移动的距离就是它在移动,把你要移动的内容放在movable-view里面即可 实际代码结构是这样的 : /wxml //x 和 y 代表初始位置 direction可移动的方向 all为 垂直水平都可以 // 你要移动的视图放这里 只要设置好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(￣▽￣)ブ

本文章由javascript技术分享原创和收集