思路：
利用onmousedown事件實現(xiàn)拖拽。首先獲得鼠標橫坐標點和縱坐標點到div的距離，然后當鼠標移動后再用可視區(qū)的距離減去橫縱坐標與div的距離。然后在判斷不讓DIV移出可視區(qū)，然后再賦予DIV的位置。最后關(guān)閉鼠標onmouseup事件。
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title></title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background: #00FFFF;
position: absolute;
border: 1px solid;
}
</style>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById('div1');
var disX = 0;
var disY = 0;
div.onmousedown = function (ev) { //鼠標按下
var oEvent = ev || event; //判斷瀏覽器兼容
disX = oEvent.clientX - div1.offsetLeft; //鼠標橫坐標點到div的offsetLeft距離
disY = oEvent.clientY - div1.offsetTop; //鼠標縱坐標點到div的offsetTop距離
div.onmousemove = function (ev) { //鼠標移動
var oEvent = ev || event;
var l = oEvent.clientX - disX; //獲取div左邊的距離
var t = oEvent.clientY - disY; //獲取div上邊的距離
if (l < 0) { //判斷div的可視區(qū)，為避免DIV失去鼠標點
l = 0;
}
else if (l > document.documentElement.clientWidth - div.offsetWidth) {
l = document.documentElement.clientWidth - div.offsetWidth;
}
if (t < 0) {
t = 0;
}
else if (t > document.documentElement.clientHeight - div.offsetHeight) {
t = document.documentElement.clientHeight - div.offsetHeight;
}
div.style.left = l + 'px'; //確定DIV的左邊位置
div.style.top = t + 'px'; //確定DIV的上邊位置
}
div.onmouseup = function () { //當鼠標松開后關(guān)閉移動事件和自身事件
div.onmousemove = null;
div.onmouseup = null;
}
return false;
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
