IE和FF下通用的DIV托动----用的是捕获（鼠标不拈贴）

pclook

于 2010-10-19 22:03:00 发布

阅读量330

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： div ie function null html up

本文链接：https://blog.youkuaiyun.com/pclook/article/details/5952454

HTML 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个可拖动的div元素。通过监听mousedown、mousemove和mouseup事件，使得div元素可以被鼠标拖动并改变其位置。此示例适用于学习基本的DOM操作和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>