可拖拽的弹框
pc端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可拖动的弹窗</title> <style type="text/css"> a{text-decoration: none; color: #eee; display: block;} .button{width: 200px; height: 50px; border-radius: 20px; text-align:center;line-height: 50px;} .callout_button{background:#FF5B5B;margin:0 auto; } .callout_button:hover{background: red;} .close_button{background:#363636;margin:0 auto;} .close_button:hover{background: black;} .mask{width: 100%;height: 100%;background:#000;position: absolute;top: 0px;left:0px;opacity: 0.4;z-index: 8000; display: none;-moz-user-select: none; -webkit-user-select: none;} .dialog{width: 380px;background:#fff; position: absolute;z-index: 9000;padding-bottom: 10px; display: none;-moz-user-select: none; -webkit-user-select: none;} .dialog_head{width: 100%;height:50px;background:#4B4B4B;text-align: center;line-height: 50px;color: #eee; cursor: move;} .dialog_content{width: 100%;height:300px;} </style> </head> <body> <div id="callout" class="button callout_button"><a href="#">弹出对话框</a></div> <div id="mask" class="mask"></div> <div class="dialog" id="dialog"> <div class="dialog_head" id="move_part">可拖拽部分</div> <div class="dialog_content"></div> <div class="button close_button" id="close"><a href="#">点我关闭对话框</a> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $dialog = $("#dialog"); var $mask = $("#mask"); //自动居中对话框 function autoCenter(el){ var bodyW = $(window).width(); var bodyH = $(window).height(); var elW = el.width(); var elH = el.height(); $dialog.css({"left":(bodyW-elW)/2 + 'px',"top":(bodyH-elH)/2 + 'px'}); }; //点击弹出对话框 $("#callout").click(function(){ $dialog.css("display","block"); $mask.css("display","block"); autoCenter($dialog); }); //禁止选中对话框内容 if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none; g('dialog').attachEvent('onselectstart', function() { return false; }); } //声明需要用到的变量 var mx = 0,my = 0; //鼠标x、y轴坐标（相对于left，top） var dx = 0,dy = 0; //对话框坐标（同上） var isDraging = false; //不可拖动 //鼠标按下 $("#move_part").mousedown(function(e){ e = e || window.event; mx = e.pageX; //点击时鼠标X坐标 my = e.pageY; //点击时鼠标Y坐标 dx = $dialog.offset().left; dy = $dialog.offset().top; isDraging = true; //标记对话框可拖动 }); //鼠标移动更新窗口位置 $(document).mousemove(function(e){ var e = e || window.event; var x = e.pageX; //移动时鼠标X坐标 var y = e.pageY; //移动时鼠标Y坐标 if(isDraging){ //判断对话框能否拖动 var moveX = dx + x - mx; //移动后对话框新的left值 var moveY = dy + y - my; //移动后对话框新的top值 //设置拖动范围 var pageW = $(window).width(); var pageH = $(window).height(); var dialogW = $dialog.width(); var dialogH = $dialog.height(); var maxX = pageW - dialogW; //X轴可拖动最大值 var maxY = pageH - dialogH; //Y轴可拖动最大值 moveX = Math.min(Math.max(0,moveX),maxX); //X轴可拖动范围 moveY = Math.min(Math.max(0,moveY),maxY); //Y轴可拖动范围 //重新设置对话框的left、top $dialog.css({"left":moveX + 'px',"top":moveY + 'px'}); }; }); //鼠标离开 $("#move_part").mouseup(function(){ isDraging = false; }); //点击关闭对话框 $("#close").click(function(){ $dialog.css("display","none"); $mask.css("display","none"); }); //窗口大小改变时，对话框始终居中 window.onresize = function(){ autoCenter($dialog); }; }); </script> </body> </html>
移动端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <title>div块跟随手指拖动</title> </head> <body> <div id="id"></div> <style type="text/css"> div{ width: 200px; height: 200px; background: #ccc; position: absolute; left: 0px; top: 100px; } </style> <script type="text/javascript"> var _x_start,_y_start,_x_move,_y_move,_x_end,_y_end,left_start,top_start; document.getElementById("id").addEventListener("touchstart",function(e) { _x_start=e.touches[0].pageX; _y_start=e.touches[0].pageY; // console.log("start",_x_start) left_start=$("#id").css("left"); top_start=$("#id").css("top"); }) document.getElementById("id").addEventListener("touchmove",function(e) { _x_move=e.touches[0].pageX; _y_move=e.touches[0].pageY; // console.log("move",_x_move) $("#id").css("left",parseFloat(_x_move)-parseFloat(_x_start)+parseFloat(left_start)+"px"); $("#id").css("top",parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)+"px"); console.log(parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)); }) document.getElementById("id").addEventListener("touchend",function(e) { var _x_end=e.changedTouches[0].pageX; var _y_end=e.changedTouches[0].pageY; // console.log("end",_x_end) }) //阻止浏览器下拉事件 $('body').on('touchmove', function (event) {event.preventDefault();}); // or // document.addEventListener('touchmove', function(e){e.preventDefault()}, false); </script> </body> </html>
