可拖拽的悬浮球效果可拖拽的悬浮球效果可拖拽的悬浮球效果可拖拽的悬浮球效果可拖拽的悬浮球效果可拖拽的悬浮球效果可拖拽的悬浮

<!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>
    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
        }
      }
    }
  </script>
  <script>
    // 使用说明
    // 引入suspension-ball.js，调用suspensionBall()方法，第一个参数传要拖动元素的id，第二个参数传点击后的跳转链接
    suspensionBall('ballId', 'https://www.baidu.com')
  </script>
</body>

</html>