div { position: absolute; 100px; height: 100px; background:#f00; }
<div></div>
<script type="text/javascript"> var oDiv = document.querySelector("div"); var cw = document.documentElement.clientWidth; //获取可视区域宽度 var ch = document.documentElement.clientHeight; //获取可视区域高度 var dw = oDiv.offsetWidth; // 获取div的width+padding+border var dh = oDiv.offsetHeight; // 获取div的height+padding+border var mw = cw - dw; //计算div移动的最大宽度 var mh = ch - dh; //计算div移动的最大高度 oDiv.onmousedown = function (e) { var evt = e || event; var _x = evt.offsetX; //offsetX 鼠标距离事件源的左边距 var _y = evt.offsetY; //offsetY 鼠标距离事件源的上边距 document.onmousemove = function (e) { var evt = e || event; var x = evt.clientX - _x; var y = evt.clientY - _y; x = x < 0 ? 0 : x > mw ? mw : x; y = y < 0 ? 0 : y > mh ? mh : y; oDiv.style.left = x + "px"; oDiv.style.top = y + "px"; } document.onmouseup = function () { document.onmousemove = null; } } /* 注意:onmouseup、onmousemove事件必须加在document上,否则如果事件添加在div上, 当鼠标移动过快移出div时,onmousemove、onmouseup事件会失效。 */ </script>