js实现拖动div,兼容IE、FireFox,暂不兼容Chrome


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.move{width:300px; height:200px;position:absolute; border-style:solid; border-color:#F00;}
.move2{width:300px; height:200px;position:absolute; border-style:solid; border-color:#F00; left:400px; top:400px;}
.title{width:300px; height:20px;border-color:#39F; background-color:#FF0; }
</style>
<script type="text/javascript">
var Obj;
document.onmouseup = MUp;
document.onmousemove = MMove;
function MDown(objMove, event) {
Obj = document.getElementById(objMove);
if (window.event) {
event = window.event;
Obj.setCapture();
}
else {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
pX = event.clientX - Obj.offsetLeft;
pY = event.clientY - Obj.offsetTop;
}
function MMove(event) {
if (window.event) event = window.event;
if (Obj) {
Obj.style.left = event.clientX - pX + "px";
Obj.style.top = event.clientY - pY + "px";
}
}
function MUp(event) {
if (Obj) {
if (window.event) Obj.releaseCapture();
else window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
Obj = null;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="move" class="move">
<div id="box" class="title" onmousedown="MDown('move', event);">Title</div>
</div>
<div id="move2" class="move2">
<div id="box2" class="title" onmousedown="MDown('move2', event);">Title</div>
</div>
</div>
</form>
</body>
</html>

posted @ 2013-08-29 23:53  tesla.su  阅读(240)  评论(0编辑  收藏  举报