导读：这几天一直在研究js拖动div方法，今天正好把写出来的代码分享一下，需要的朋友可以参考一下，不足的地方多多指教一下。
这几天一直在研究js拖动div方法，今天正好把写出来的代码分享一下，需要的朋友可以参考一下，不足的地方多多指教一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function Drag(id) {
var $ = function (flag) {
return document.getElementById(flag);
}
$(id).onmousedown = function (e) {
var d = document;
var page = {
event: function (evt) {
var ev = evt || window.event;
return ev;
},
pageX: function (evt) {
var e = this.event(evt);
return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
},
pageY: function (evt) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
layerX: function (evt) {
var e = this.event(evt);
return e.layerX || e.offsetX;
},
layerY: function (evt) {
var e = this.event(evt);
return e.layerY || e.offsetY;
}
}
var x = page.layerX(e);
var y = page.layerY(e);
var dv=document.getElementById("ok");
if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = function (e) {
var maxContainer=document.documentElement || document.body;
var maxTop = Math.max(maxContainer.clientHeight, maxContainer.scrollHeight) - $(id).offsetHeight;
var maxLeft = Math.max(maxContainer.clientWidth, maxContainer.scrollWidth) - $(id).offsetWidth;
var event = e || window.event;
var tx = event.clientX - x;
var ty = event.clientY - y;
if(tx>0&&ty>0&&tx<=maxLeft&&ty<=maxTop)
{
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
}
d.onmouseup = function () {
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
}
}
</script>
</head>
<body>
<div id="ok" onmousedown="Drag('ok')" style="border:#FF0000 1px solid; height:100px; width:100px; position:absolute">
</div>
</body>
</html>
