前言
最近看到張鑫旭大大的一片關于實現微信浮窗功能實現, 覺得很好玩, 剛好有這方面需求, 所以直接就做了. 由于項目并非單頁面, 沒有辦法直接將頁面藏在按鈕下面, 所以只做了拖拽和吸附的功能. 本來是想直接使用張大大的吸附功能代碼, 但是看了一下, 這個代碼是基于jQuery, 而且沒有封裝, “一氣之下” 自己封裝了一個模塊, 以下是這個模塊的使用方法, 具體實現請看源碼:
[https://github.com/DiligentYe/Inertia](https://github.com/DiligentYe/Inertia
使用說明
Inertia
移動端頁面元素拖動吸附功能
效果圖
基本用法
- 在頁面上引入inertia.js文件
<script src="./ObjectFollow.js"></script>
- 獲取需要綁定拖動吸附功能的元素
var ele = document.getElementById('ele')
- 創建一個Inertia對象
var obf = new Inertia(ele)
- 調用初始化方法
obf.init()
可選項
可以通過Inertia構造函數傳入第二個參數options
new Inertia(ele, options)
其中options包括一下可配置屬性:
- border:
object, 包括 top, bottom, left, right四個選項, 控制可拖動元素的上下左右的邊界, 默認值為
top: 80,
bottom: 100,
left: 20,
right: 20 ,
- initPos:
可拖動元素的初始位置, 包括posX, posY, 水平方向和垂直方向上的位置, 默認值為
posX : this.computedBorder.right, // 可移動的最右側
posY : 150,
- speed:
自動吸附的速度, 默認值為10
注意事項
- 物體一定要設置transform屬性, 最好設置為transform: translate3d(0px, 0px, 0px)
- 物體設置定位, 定位在 左上角, 即top: 0; left: 0;
- 建議物體為正方行或者圓形, 如不是, 請設置padding屬性, 再單獨設置其他屬性
- 如自行設置options中border屬性, 需要top, bottom, left, right都設置
- 如自行設置options中initPos屬性, 需要posX, posY都設置
不足之處
- requestAnimationFrame未做兼容
- touchmove未做截流
