js制作可拖拽可点击的悬浮球
兼容mouse事件和touch事件，支持IE9及其以上
效果展示：https://jsfiddle.net/shifeng/7xebf3u0/
// index.html
<!DOCTYPE html>
<html lang="en">
<!-- 防止IE提示“Internet Explorer已限制此网页运行脚本或ActiveX控件” -->
<!-- saved from url=(0014)about:internet -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#ballId {
background: rgb(19, 167, 19);
color: white;
width: 50px;
text-align: center;
height: 50px;
line-height: 50px;
border-radius: 50%;
box-shadow: 5px 5px 40px rgba(0, 0, 0, 0.5);
/* 过渡效果在IE下展示效果不友好 */
transition: all 0.08s;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
</style>
</head>
<body>
<div id="ballId">drag</div>
<script src="./suspension-ball.js"></script>
<script>
// 使用说明
// 引入suspension-ball.js，调用suspensionBall()方法，第一个参数传要拖动元素的id，第二个参数传点击后的跳转链接
suspensionBall('ballId', 'https://www.baidu.com')
</script>
</body>
</html>
// suspension-ball.js
function suspensionBall(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 = true
var disX, disY, left, top, starX, starY
drag.addEventListener(startEvt, function (e) {
// 阻止页面的滚动，缩放
e.preventDefault()
// 兼容IE浏览器
var e = e || window.event
isClick = true
// 手指按下时的坐标
starX = e.touches ? e.touches[0].clientX : e.clientX
starY = e.touches ? e.touches[0].clientY : e.clientY
// 手指相对于拖动元素左上角的位置
disX = starX - drag.offsetLeft
disY = 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) - disX
top = (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制作可拖拽可点击的悬浮球的更多相关文章
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- wordpress模块无法拖拽/显示选项点击无反应
问题:wordpress模块无法拖拽/显示选项点击无反应,还有编辑器的全屏什么的都用不了,按F12查看了console,提示很多jQuery is not defined... 解决方法:把wp-in ...
- 【百度地图API】如何制作可拖拽的沿道路测距
原文:[百度地图API]如何制作可拖拽的沿道路测距 摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- 纯JS实现可拖拽表单
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...
- asp.net webuploader粘贴，拖拽，点击上传图片
demo.html代码:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
- Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
随机推荐
- Docker-Dockerfile及基本语法
Dockerfile的作用是通过它可以生成自定镜像,先介绍几个基本的docker命令. [docker镜像相关的命令]docker search 镜像名: 搜索镜像docker pull 镜像名: 镜 ...
- windows docker redis
拉取docker docker pull hub.c.163.com/library/redis:latest 启动docker docker run -p 6379:6379 -d hub.c.16 ...
- CentOS6.9安装WordPress搭建自己的博客网站
首先说明我用的是服务器上之前装的mysql数据库,只需要配置上就行了 准备工作 CentOS6.9 在/目录下创建一个目录src,把下载的东西都放到这个文件夹下 下载Apache Httpd,下载地址 ...
- win7系统IE浏览器主页被搜狗篡改问题的解决方法
IE浏览器使用一段时间后可能大家就会遇到主页被篡改的问题,篡改之后主页就变成了搜狗页面,我们常用的百度搜索也变成了搜狗搜索,这不仅使得我们操作起 来不习惯,使用起来也会感觉非常别扭.那如果在使用IE浏 ...
- 三十七、小程序页面跳转传参参数值为url时参数丢失
当参数的值为url的时候,在options中的值没有参数“?”之后字符串被截取.例如:let url="http://baidu.com/?a=1&b=2"wx.navig ...
- 我的工具：Db SQL Monitor
SQL Monitor 是一款界面简洁.绿色小巧的sql活动监视器,它能够帮助用户对 SQL Server 运行进程和Job进行实时监视,您可以查看当前执行的SQL/命令并终止. 工具下载地址:htt ...
- Vue—组件传值及vuex的使用
一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...
- Linux切换为超级用户的命令
问题描述 使用vi编辑器写好内容后保存并退出时遇到以下问题 解决方案 该问题的原因是用户权限不够,因为普通用户用 vi 不能保存文件,需要使用超级用户才可以. 先转换为超级用户:su 再用vi打开文件 ...
- LeetCode21—合并两个有序链表
方法一:这是我一开始的想法,将链表L2的各个元素与链表L1的元素进行逐一比较,将L2中的数据元素插入L1中的合适位置. 时间复杂度:O(m+n):空间复杂度:O(1) 1)首先,可能要对第一个元素进行 ...
- (简单)华为Nova青春 WAS-AL00的USB调试模式在哪里开启的流程
就在我们使用Pc接通安卓手机的时候,如果手机没有开启usb开发者调试模式,Pc则无办法成功检测到我们的手机,在一些情况下,我们使用的一些功能较强的app好比之前我们使用的一个app引号精灵,老版本就需 ...