js 悬浮按钮，支持PC和移动端拖动

Cesium 安卓版的App 打包成功了，下面需要实现一个类似苹果home 的功能。要求很简单，需要在Web和移动端支持home键的移动。js实现逻辑如下

function move_home(dragId, dragLink) {var startEvt, moveEvt, endEvt// 判断是否支持触摸事件if ('ontouchstart' in window) {startEvt = 'touchstart'moveEvt = 'touchmove'endEvt = 'touchend'} else {startEvt = 'mousedown'moveEvt = 'mousemove'endEvt = 'mouseup'}// 获取元素var drag = document.getElementById(dragId)drag.style.position = 'absolute'drag.style.cursor = 'move'// 标记是拖曳还是点击var isClick = truevar disX, disY, left, top, starX, starYdrag.addEventListener(startEvt, function(e) {// 阻止页面的滚动，缩放e.preventDefault()// 兼容IE浏览器var e = e || window.eventisClick = true// 手指按下时的坐标starX = e.touches ? e.touches[0].clientX : e.clientXstarY = e.touches ? e.touches[0].clientY : e.clientY// 手指相对于拖动元素左上角的位置disX = starX - drag.offsetLeftdisY = starY - drag.offsetTop// 按下之后才监听后续事件document.addEventListener(moveEvt, moveFun)document.addEventListener(endEvt, endFun)})function moveFun(e) {// 兼容IE浏览器var e = e || window.event// 防止触摸不灵敏，拖动距离大于20像素就认为不是点击，小于20就认为是点击跳转if (Math.abs(starX - (e.touches ? e.touches[0].clientX : e.clientX)) > 20 ||Math.abs(starY - (e.touches ? e.touches[0].clientY : e.clientY)) > 20) {isClick = false}left = (e.touches ? e.touches[0].clientX : e.clientX) - disXtop = (e.touches ? e.touches[0].clientY : e.clientY) - disY// 限制拖拽的X范围，不能拖出屏幕if (left < 0) {left = 0} else if (left > document.documentElement.clientWidth - drag.offsetWidth) {left = document.documentElement.clientWidth - drag.offsetWidth}// 限制拖拽的Y范围，不能拖出屏幕if (top < 0) {top = 0} else if (top > document.documentElement.clientHeight - drag.offsetHeight) {top = document.documentElement.clientHeight - drag.offsetHeight}drag.style.left = left + 'px'drag.style.top = top + 'px'}function endFun(e) {document.removeEventListener(moveEvt, moveFun)document.removeEventListener(endEvt, endFun)if (isClick) { // 点击// window.location.href = dragLink}}}

最终实现效果如下

js 悬浮按钮，支持PC和移动端拖动相关推荐

Unity 点击、双击、连击、长按事件检测(支持PC和移动端)
InputDefine 类:(公共变量.常量.枚举.事件)定义 using System.Collections; using System.Collections.Generic; using Un ...
uaredirect.js 进行判断是pc还是wap端（移动端） wap端跳转页面
在pc的网址里面加入代码 <script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" ...
larkplayer视频播放器: 同时支持PC、移动端插件化的HTML5视频播放器。
larkplayer:是一款轻量级 & 易扩展的 html5 播放器,是为解决一些中小型的视频业务场景.这些业务不一定需要大而全的解决方案,并且他们往往有自己的定制化需求. 介绍:larkpl ...
android悬浮功能实现,Android实现系统级悬浮按钮
本文实例为大家分享了Android系统级悬浮按钮的具体代码,供大家参考,具体内容如下具体的需求 1.就是做一个系统级的悬浮按钮,就像iPhone 桌面的那个悬浮按钮效果一样,能随意拖动,并且手一放开 ...
VUE PC端可拖动悬浮按钮改进
VUE PC端可拖动悬浮按钮改进之前发过一篇悬浮球的,但是那个不太好用,鼠标移动过快会脱标,就很难受,最近又改了一下,这是加了个监听,拖动结束的时候改变top和left,应该还能改进,欢迎大佬们提出 ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
移动端的返回顶部悬浮按钮还需要存在吗？
一. 返回顶部悬浮按钮的出现返回顶部悬浮按钮大家都不陌生,在pc端浏览网页的时候都会在右下角出现,方便用户点击后直接返回到顶部.产品功能都是为了解决用户的需求而出现的,返回顶部悬浮按钮也是如此.那么 ...
每日一练苹果悬浮按钮 JS CSS HTML
苹果悬浮按钮代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
好签H5签字SDK,支持PC端实现网页手写
好签H5签字SDK是一种支持原笔迹手写的组件,支持PC端网页打开,提供手写签批功能,支持对PDF文件,插入签名.日期.文本等内容.原笔迹手写引擎是好签电子签署系统的核心技术产品之一,是南京好签软件技术 ...

js 悬浮按钮，支持PC和移动端拖动

js 悬浮按钮，支持PC和移动端拖动相关推荐

最新文章

热门文章