對ctrl+a後拖動的問題做了處理 ...
對ctrl+a後拖動的問題做了處理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../reset.css"> <style> .box{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="box">111</div> <script> window.onload = function () { var box = document.querySelector(".box"); var boxStart = { left: 0, top: 0 }; var mouseStart = { left: 0, top: 0 }; box.onmousedown = function (ev) { // 綁定全局捕獲 box.setCapture && box.setCapture(); ev = ev || window.event; // 阻止預設事件相容性寫法 ev.preventDefault?ev.preventDefault():ev.returnValue=false; // 阻止傳播相容性寫法 // ev.stopPropagation?ev.stopPropagation():ev.cancelBubble=true; // 滑鼠開始的位置 mouseStart.left = ev.clientX; mouseStart.top = ev.clientY; // 盒子開始的位置 boxStart.left = box.offsetLeft; boxStart.top = box.offsetTop; document.onmousemove = function (ev) { ev = ev || window.event; // 滑鼠結束的位置 var mouseEnd = {}; mouseEnd.left = ev.clientX; mouseEnd.top = ev.clientY; // 移動的差值 var mouseLenX = mouseEnd.left - mouseStart.left; var mouseLenY = mouseEnd.top - mouseStart.top; // 移動後的位置 var L = boxStart.left + mouseLenX; var T = boxStart.top + mouseLenY; // 視口尺寸 var winW = document.documentElement.clientWidth; var winH = document.documentElement.clientHeight; // 盒子尺寸 var boxW = box.offsetWidth; var boxH = box.offsetHeight; L = L<0?0:L; L = L>=winW-boxW?winW-boxW:L; T = T<0?0:T; T = T>=winH-boxH?winH-boxH:T; box.style.left = L + "px"; box.style.top = T + "px"; }; document.onmouseup = function () { // 釋放全局捕獲 document.releaseCapture && document.releaseCapture(); document.onmousemove = document.onmouseup = null; } } } </script> </body> </html>
