纯js实现可拖拽和点击的悬浮球

shifeng~

已于 2024-04-08 12:20:00 修改

阅读量647

点赞数 12

分类专栏：代码块文章标签： javascript 经验分享前端

于 2024-04-01 21:18:06 首次发布

本文链接：https://blog.csdn.net/qq_36330464/article/details/137246833

版权

代码块专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了一个JavaScript库suspension-ball.js，用于在HTML中实现鼠标和触屏拖动事件的兼容，确保在IE9及以上版本中也能正常工作，通过示例代码展示了如何在悬浮球上添加点击和拖动功能并定向跳转。

摘要由CSDN通过智能技术生成

兼容 mouse 事件和 touch 事件，支持 IE9 及其以上
效果展示：https://jsfiddle.net/shifeng/7xebf3u0/
代码下载：https://download.csdn.net/download/qq_36330464/89067484

<!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
    }
  }
}