pc+手机端客服按钮可以随意拖拽和拖动的,并且后面打开保留在之前位置(基于localStorage)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手机+pc拖动效果</title> <script src="https://wdfkshop.oss-cn-beijing.aliyuncs.com/static/cnadmin/js/jquery-1.9.1.min.js" type="text/javascript"></script> <style> .drag { position: fixed; bottom: 20px; right: 30px; width: 200px; height: 200px; background: red; cursor: pointer; border-radius: 300px; display: flex; flex-direction: row; align-items: center; justify-content: center; } </style> </head> <body> <div class="drag"> <a link="tz">我可以被拖动</a></div> <script> var drag = $('.drag')[0]; var drag_left = localStorage.getItem("drag_left"); var drag_top = localStorage.getItem("drag_top"); console.log(drag_left); console.log(drag_top); if (drag_left != '' || drag_top != '') { drag.style.left = drag_left; drag.style.top = drag_top; } var flag = false; var cur = { x: 0, y: 0 } var nx, ny, dx, dy, x, y; function down() { flag = true; var touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } cur.x = touch.clientX; cur.y = touch.clientY; dx = drag.offsetLeft; dy = drag.offsetTop; } function move() { if (flag) { var touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } nx = touch.clientX - cur.x; ny = touch.clientY - cur.y; x = dx + nx; y = dy + ny; drag.style.left = x + "px"; drag.style.top = y + "px"; //存入本地的localstorage里面 localStorage.setItem("drag_left", drag.style.left); localStorage.setItem("drag_top", drag.style.top); //阻止页面的滑动默认事件 document.addEventListener("touchmove", function () { event.preventDefault(); }, false); } } //鼠标释放时候的函数 function end() { flag = false; } if (isMobileDevice()) { // 手机设备 drag.addEventListener("touchstart", function () { down(); }, false) drag.addEventListener("touchmove", function () { move(); }, false) drag.addEventListener("touchend", function () { end(); }, false); } else { // 电脑浏览器 drag.addEventListener("mousedown", function () { console.log("mousedown"); $(window).on('mousemove', tuodong) }, false); drag.addEventListener("mousemove", function () { console.log("mousemove"); }, false); document.documentElement.addEventListener("mouseup", function () { console.log("mouseup"); $(window).off('mousemove'); }); } var tuodong = function (e) { var x = e.clientX; var y = e.clientY; $('.drag').css({ left: (x - $('.drag').width() / 2) + 'px', top: (y - $('.drag').height() / 2) + 'px' }) //存入本地的localstorage里面 localStorage.setItem("drag_left", (x - $('.drag').width() / 2) + 'px'); localStorage.setItem("drag_top", (y - $('.drag').height() / 2) + 'px'); } function isMobileDevice() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); } //跳转 $("[link=tz]").click(function () { window.location.href = "http://www.baidu.com"; }); //移动端防止下拉 document.addEventListener('touchmove', function (event) { event.preventDefault(); }, { passive: false }); </script> </body> </html>
下面是生产环境优化后的代码:<style> .drag { position: fixed; margin-bottom: 100px; z-index: 6666; } </style> <div class="drag" draggable="true"> <img src="{$web_set_info['kefu_img']|default='/static/web/theme2/m/images/kefu1.png'}" style="width:50px;height:50px;"> </div> <script> // 获取屏幕的宽度和高度 var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var drag = $('.drag')[0]; var drag_left = localStorage.getItem("drag_left"); var drag_top = localStorage.getItem("drag_top"); console.log(drag_left); console.log(drag_top); if (drag_left || drag_top) { drag.style.left = drag_left; drag.style.top = drag_top; } else { //这里要把right和bottom转化成left和top的值 //drag.style.right = "{$web_set_info['kefu_right_px']|default='10px'}"; //drag.style.bottom = "{$web_set_info['kefu_bottom_px']|default='300px'}"; var kefu_right_px = parseInt("{:cleanString($web_set_info['kefu_right_px'],10)}"); var kefu_bottom_px = parseInt("{:cleanString($web_set_info['kefu_bottom_px'],300)}"); drag.style.left = (screenWidth - 50 - kefu_right_px) + "px"; drag.style.top = (screenHeight - 50 - kefu_bottom_px) + "px"; } var flag = false; var cur = { x: 0, y: 0 } var nx, ny, dx, dy, x, y; function down() { console.log("down", "执行到了down"); flag = true; var touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } console.log("touch", touch); cur.x = touch.clientX; cur.y = touch.clientY; dx = drag.offsetLeft; dy = drag.offsetTop; } function move() { if (flag) { var touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } console.log("cur", cur); nx = touch.clientX - cur.x; ny = touch.clientY - cur.y; x = dx + nx; y = dy + ny; // 获取屏幕的宽度和高度 var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //console.log("screenWidth",screenWidth); //console.log("screenHeight",screenHeight); // 获取拖拽元素的宽度和高度 var dragWidth = drag.offsetWidth; var dragHeight = drag.offsetHeight; //console.log("dragWidth",dragWidth); //console.log("dragHeight",dragHeight); // 计算元素的左边界和上边界 var leftBoundary = 0; var topBoundary = 0; // 计算元素的右边界和下边界 var rightBoundary = screenWidth - dragWidth; var bottomBoundary = screenHeight - dragHeight; //console.log("rightBoundary",rightBoundary); //console.log("bottomBoundary",bottomBoundary); console.log("x", x); console.log("y", y); // 确保拖拽元素的位置在屏幕可视范围内 x = Math.min(Math.max(x, leftBoundary), rightBoundary); y = Math.min(Math.max(y, topBoundary), bottomBoundary); drag.style.left = x + "px"; drag.style.top = y + "px"; //存入本地的localstorage里面 localStorage.setItem("drag_left", drag.style.left); localStorage.setItem("drag_top", drag.style.top); //console.log(drag.style.left); //console.log(drag.style.top); } } //鼠标释放时候的函数 function end() { flag = false; } var flag1 = 0; // 标记是拖曳还是点击 if (isMobileDevice()) { // 手机设备 drag.addEventListener("touchstart", function (event) { down(); //移动的时候防止冒泡 flag1 = 0; console.log("touchstart"); event.preventDefault(); }, false) drag.addEventListener("touchmove", function () { move(); flag1 = 1; console.log("touchmove"); }, false) drag.addEventListener("touchend", function (event) { end(); console.log("touchend"); if (flag1 == 0) { // 点击 console.log("click"); window.location.href = "{$web_set_info['kefu_url']}"; return; } else if (flag1 == 1) { // 拖曳 console.log("touchmove"); } }, false); } else { // 电脑浏览器 /* var offsetX, offsetY; var isDragging = false; var mouseDownTime; drag.addEventListener('mousedown', function (event) { offsetX = event.clientX - drag.offsetLeft; offsetY = event.clientY - drag.offsetTop; isDragging = true; // 记录鼠标按下时间 mouseDownTime = Date.now(); // 阻止默认的文本选择行为 event.preventDefault(); }); document.addEventListener('mousemove', function (event) { console.log("mousemove"); if (isDragging) { tuodong(event); } }); document.addEventListener('mouseup', function () { var currentTime = Date.now(); var timeDiff = currentTime - mouseDownTime; if (timeDiff <= 200) { // 200毫秒内视为点击操作 console.log("click"); window.location.href = "{$web_set_info['kefu_url']}"; } else { // 否则视为拖拽操作 console.log("touchmove"); } isDragging = false; }); */ var offsetX, offsetY; drag.addEventListener('dragstart', function (event) { console.log("dragstart"); }); document.addEventListener('drag', function (event) { console.log("drag"); console.log(event); return; }); document.addEventListener('dragend', function (event) { tuodong(event); return; }); $(".drag").click(function () { console.log("点击了"); window.location.href = "{$web_set_info['kefu_url']}"; return; }); } var tuodong = function (e) { var x = e.clientX; var y = e.clientY; $('.drag').css({ left: (x - $('.drag').width() / 2) + 'px', top: (y - $('.drag').height() / 2) + 'px' }) //存入本地的localstorage里面 localStorage.setItem("drag_left", (x - $('.drag').width() / 2) + 'px'); localStorage.setItem("drag_top", (y - $('.drag').height() / 2) + 'px'); } var tuodong1 = function (event) { var left = event.clientX; var top = event.clientY; console.log(left); console.log(top); drag.style.left = left + 'px'; drag.style.top = top + 'px'; //存入本地的localstorage里面 localStorage.setItem("drag_left", left + 'px'); localStorage.setItem("drag_top", top + 'px'); } function isMobileDevice() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); } </script> <!-- <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script> <script> // VConsole 默认会挂载到 `window.VConsole` 上 var vConsole = new window.VConsole(); </script> -->
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:pc+手机端客服按钮可以随意拖拽和拖动的,并且后面打开保留在之前位置(基于localStorage) - http://www.wlphp.com/?post=413