可拖动的弹窗
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>轉載于:https://www.cnblogs.com/xutongbao/p/9924904.html
總結
- 上一篇： VS2015配置内核WDK7600环境,
- 下一篇： BZOJ2659: [Beijing w