兼容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制作可拖拽可点击的悬浮球的更多相关文章

  1. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  2. wordpress模块无法拖拽/显示选项点击无反应

    问题:wordpress模块无法拖拽/显示选项点击无反应,还有编辑器的全屏什么的都用不了,按F12查看了console,提示很多jQuery is not defined... 解决方法:把wp-in ...

  3. 【百度地图API】如何制作可拖拽的沿道路测距

    原文:[百度地图API]如何制作可拖拽的沿道路测距 摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后 ...

  4. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  5. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  6. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

  7. asp.net webuploader粘贴，拖拽，点击上传图片

    demo.html代码:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  8. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  9. Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

随机推荐

  1. （五）图数据库数neo4j据备份与恢复

    1.备份方式 neo4j目前有三种备份方式: (1)java在线备份,通过java程序可在neo4j启动状态下备份数据,也可远程备份(社区版本目前不支持) (2)neo4j-admin工具,可在neo ...

  2. SQL Server创建Job， 实现执行相同脚本而产生不同作业计划的探究

    1 . 背景描述 本公司的SQL Server 服务器近百台,为了收集服务器运行的状态,需要在各个实例上部署监控Job,将收集到的信息推送到中央管理服务器. 收集的信息主要包括:慢查询.阻塞.资源等待 ...

  3. Java三大特性

    Java 三大特性,算是Java独特的表现,提到Java 的三大特性, 我们都会想到封装, 继承和多态 这是我们Java 最重要的特性. 封装(Encapsulation) : 封装:是指隐藏对象的属 ...

  4. 'Attempt to create two animations for cell' iOS

    我是在对一个UITableView 一起进行 reloadRows和reloadSections 的操作的时候 出现的

  5. 利用Sonar定制自定义扫描规则

      上有3种方法可以自定义soanr的代码校验规则: 直接在sonar的web接口中增加XPath规则: 通过插件的功能来增加自定义规则,比如checkstyle,pmd等插件是允许自定义规则的: 通 ...

  6. 如何使用ASP.NET Core、EF Core、ABP(ASP.NET Boilerplate)创建分层的Web应用程序（第一部分）

    本文是为了学习ABP的使用,是翻译ABP官方文档的一篇实战教程,我暂时是优先翻译自己感兴趣或者比较想学习的部分,后续有时间希望能将ABP系列翻译出来,除了自己能学习外,有可能的话希望帮助一些英文阅读能 ...

  7. (light oj 1102) Problem Makes Problem (组合数 + 乘法逆元)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1102 As I am fond of making easier problems, ...

  8. 关于npm安装报错 网络问题等等等

    最近需要安装taro 结果网络各种报错 解决方法 : 1重置网络 npm config rm proxynpm config rm https-proxy 2换淘宝镜像 npm config set ...

  9. jmeter学习记录--04--Beanshell

    一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法;BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanSh ...

  10. QQ浏览器、火狐浏览器中页面有点大的问题记录

    做页面时候,发现火狐和腾讯QQ浏览器有个问题,就是会将页面显示的比较大,像点了缩放比例120%似的,事实上缩放比例是100%,很奇怪. 甚至面对这个问题,连腾讯公司主页也会放大,也让我很困惑. 比如: ...