微信小程序（可拖动悬浮按钮）

整体效果图

介绍

视图组件movable-view，它需要配合movable-area来一起使用。简单来说，它就是一个支持在指定区域内可以拖动内容的容器。
微信API地址： https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

案例代码：

  	
		
	


movable-area 不设置 background: red;  背景透明。

属性说明

movable-view的direction属性支持以下四个值：

1. all - 任意方向拖动

2. vertical - 纵向拖动

3. horizontal - 横向拖动

4. none - 不能拖动
   如果direction设置为最后这个none，则只能依靠设置x,y属性值来为它进行在movable-area中的定位：

蓝色的movable-view就显示在了(50,50)的位置上，不能拖动。

mavable-area 事件穿透（下方内容可点击）

说明： movable-area 范围设置全屏，导致下发页面不能触发点击事件。

movable-area 的style设置pointer-events: none
movableview的样式设置pointer-events: auto，
可以实现movable-area点击事件穿透，而浮动组件可点击拖拉。