<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script>
var isIE = /msie/i.test(navigator.userAgent);
var isFF = /firefox/i.test(navigator.userAgent);
var detlaX,detlaY,ooo;
function beginDrag(me,evt){
e = evt || window.event;
ooo = me;
document.onmousemove = move;
document.onmouseup = up;
if(isIE)me.setCapture();
if(isFF)window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
function move(evt){
e = evt || window.event;
document.getElementById("dddd").style.left = e.clientX - 20 + "px";
document.getElementById("dddd").style.top = e.clientY - 20 + "px";
}
function up(){
document.onmousemove = null;
document.onmouseup = null;
if(isIE)ooo.releaseCapture();
if(isFF)window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
</script>
</head>
<body style="overflow:hidden">bbbbbbbbbbbbbbbbbbbbbbbbb
<div id="dddd"
style="position:absolute;left:100px;top:100px;width:200px;height:200px;background-color:#ffddee;"
onMouseDown="beginDrag(this,event);">aaaaaaa</div>cccccccccccccccccccccccc
</body>
</html>
IE和FF下通用的DIV托动----用的是捕获(鼠标不拈贴)
本文介绍了一个简单的HTML页面,该页面使用JavaScript实现了一个可拖动的div元素。通过监听mousedown、mousemove和mouseup事件,使得div元素可以被鼠标拖动并改变其位置。此示例适用于学习基本的DOM操作和事件处理。

被折叠的 条评论
为什么被折叠?



