博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js实现拖动div,兼容IE、FireFox,暂不兼容Chrome
阅读量:5292 次
发布时间:2019-06-14

本文共 1455 字,大约阅读时间需要 4 分钟。

<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

你可能感兴趣的文章
Eclipse启动JVM机制
查看>>
一年的第几天
查看>>
leetcode 223: Rectangle Area
查看>>
Blender插件编写指南
查看>>
二次重建基本完成辣!
查看>>
PHP与Linux进程间的通信
查看>>
【长期更新】坑点合集
查看>>
wnmp windows 2012 r2+php7.0+nginx1.14安装
查看>>
weblogic与axis2 jar包冲突
查看>>
Hello Spring Framework——面向切面编程(AOP)
查看>>
解决java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Date
查看>>
将.lib库文件转换成.a库文件的工具
查看>>
FZU 2129 子序列个数 (动态规划)
查看>>
20155324 2016-2017-2 《Java程序设计》第7周学习总结
查看>>
CSS清浮动处理(Clear与BFC)
查看>>
thinkphp路由
查看>>
HDU - 1248-寒冰王座
查看>>
angular OnChange事件
查看>>
owin Oauth
查看>>
java String 强化操作 判断数字 字符串转阿拉伯数字,相似度等等
查看>>