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

整体效果图

介绍

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

案例代码：

<movable-area style="pointer-events: none;height: 100%;width: 100%;position:absolute;left:0px;top:0px;background: red;">
  	<movable-view direction="all" style="pointer-events: auto;height: 50px; width: 50px; background: blue;">
		<image src='../images/icon_component_HL.png' class="imgStyle"></image>
	</movable-view>
</movable-area>

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

属性说明

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

1. all - 任意方向拖动

2. vertical - 纵向拖动

3. horizontal - 横向拖动

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

    <movable-area style="height: 200px;width: 200px;background: red;">
    	  <movable-view direction="none" x="50" y="50" style="height: 50px; width: 50px; background: blue;">
    	  </movable-view>
    </movable-area>
   

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

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

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

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