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

最新推荐文章于 2024-07-29 11:53:27 发布

weixin_30855099

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量68

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/julina/p/3290587.html

版权

<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" οnmοusedοwn="MDown('move', event);">Title</div>
</div>
<div id="move2" class="move2">
<div id="box2" class="title" οnmοusedοwn="MDown('move2', event);">Title</div>
</div>
</div>
</form>
</body>
</html>

转载于:https://www.cnblogs.com/julina/p/3290587.html

weixin_30855099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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; b...
复制链接

扫一扫