<!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>
效果图如下：
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。