JQuery UI实现浮动客服并拨号

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    html {
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }

    body {
      display: block;
    }

    body {
      line-height: 1.6;
      font-family: -apple-system-font, Helvetica Neue, sans-serif;
    }

    body {
      font-size: 16px;
    }

    body, html {
      height: 100%;
      -webkit-tap-highlight-color: transparent;
    }

    * {
      margin: 0;
      padding: 0;
    }

    #draggable {
      position:fixed;
      bottom:20px;
      right:20px;
      width:160px;
      font-size:20px;
      height: 160px;
      background-color:#F5F5F5;
      color:white;
      text-align:center;
      line-height:160px;
      border-radius:80px;
      cursor: move;
    }
  </style>
</head>
<body>
<div id="draggable" draggable="true">
  <img src="/static/wxv1/images/icon_bohao.png" style="width:64px;height:64px;margin: 48px">
</div>
</body>
<script>
  //问题：jqui的拖拽默认在pc下可用，手机端需要引入jquery.ui.touch-punch.min.js模拟实现，但是会同时触发元素的click事件
  //解决：事件执行顺序为touchstart->start->stop->touchend，只要在touchend检查是否进行过移动即可判断是拖拽还是点击
   var isMoved = false; // 是否移动的flag

  $("#draggable").draggable({
    //axis: "x", // 仅允许垂直拖拽
    containment: "parent", // 限制在父元素内拖拽
    start:function (e,ui)
    {
      isMoved = true;
    },
    stop:function (e,ui)
    {
      isMoved = true;
    },
  });

  // $('#draggable').on('touchstart', function(event) {
  // });

  $('#draggable').on('touchend', function(event) {
     if(isMoved)
     {
       isMoved = false;
     }else {
       gotoTel();
     }

  });
  function gotoTel()
  {
    window.location.href = 'tel:10086';
  }

</script>
</html>

效果图如下：

 

posted @ 2025-03-06 13:55  love/coder  阅读(1)  评论(0)    收藏  举报