对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>