lostinet及各位高手请进，我很想很想读懂她，但我又不懂，急，在线等，你要说分不够，我再加，

xizi2008 2002-09-11 03:42:04

lostinet及各位高手请进，我很想很想读懂她，但我又不懂，急，在线等，你要说分不够，我再加，谁能一句一句的挨着加上注释，谢了，各位高手,
//*************************************//
<body>
<table>
<tr><td>daf</td><td>
<div id=move1 style="position:absolute;width:200px;height:200px;left:44px;top:55px;background-color:#e0e2e0">

<div id=move2 style="position:relative;width:100px;height:100px;left:30px;top:30px;background-color:blue">
<div id=move3 style="width:50px;height:50px;left:15px;top:15px;background-color:red">
</div>
</div>
</div>
</body>

<script>
MakeMovable(move1);
MakeMovable(move2);
MakeMovable(move3);
function MakeMovable(element)
{
if(element.runtimeStyle.position==""||element.runtimeStyle.position=="static")
element.runtimeStyle.position="absolute";
element.attachEvent("onmousedown",onmousedown);
element.attachEvent("onmouseup",onmouseup);
element.attachEvent("oncontextmenu",oncontextmenu);
element.attachEvent("onlosecapture",onlosecapture);
var uid=element.uniqueID;
element=null;
var moving=false;
var precursor="";

var downpos={offsetX:0,offsetY:0};
var offset={X:"offsetLeft",Y:"offsetTop"}

function GetEventOffset(element,event,xy)
{
return event["client"+xy];
}
function GetOffset(element,xy)
{
var v=0;
do
{
v+=element[offset[xy]];
}while(element=element.offsetParent)
return v;
}
function onmousemove(event)
{
var element=document.getElementById(uid);
if(event.srcElement==element)
{
element.runtimeStyle.pixelLeft=
parseInt(element.runtimeStyle.pixelLeft)+event.offsetX-downpos.offsetX;
element.runtimeStyle.pixelTop =
parseInt(element.runtimeStyle.pixelTop )+event.offsetY-downpos.offsetY;
}
else
{
element.runtimeStyle.pixelLeft=
parseInt(element.runtimeStyle.pixelLeft)
+GetEventOffset(event.srcElement,event,"X")
-GetOffset(element,"X")-downpos.offsetX;
element.runtimeStyle.pixelTop =
parseInt(element.runtimeStyle.pixelTop )
+GetEventOffset(event.srcElement,event,"Y")
-GetOffset(element,"Y")-downpos.offsetY;
}
}
function onmousedown(event)
{
if(moving)
{
event.cancelBubble=true;
return event.returnValue=false;
}
if(event.button!=1)return;
var element=document.getElementById(uid);
moving=true;
precursor=element.currentStyle.cursor
element.attachEvent("onmousemove",onmousemove);
element.runtimeStyle.cursor="move";
element.setCapture(true);

downpos.offsetX=event.offsetX;
downpos.offsetY=event.offsetY;

event.cancelBubble=true;
return event.returnValue=false;
}
function onmouseup(event)
{
if(moving&&event.button!=1)
{
event.cancelBubble=true;
return event.returnValue=false;;
}
var element=document.getElementById(uid);
if(moving==false)return;
element.detachEvent("onmousemove",onmousemove);
element.runtimeStyle.cursor=precursor;
element.releaseCapture(true);
moving=false;
}
function oncontextmenu()
{
if(moving)
{
event.cancelBubble=true;
return event.returnValue=false;;
}
}
function onlosecapture(event)
{
var element=document.getElementById(uid);
element.detachEvent("onmousemove",onmousemove);
element.runtimeStyle.cursor=precursor;
moving=false;
}
}
</script>
//**************************************//

...全文

41 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

Lostinet 2002-09-11

打赏
举报

http://www.lostinet.com/public/makeMovable.html

xizi2008 2002-09-11

打赏
举报

waiting......

Lostinet 2002-09-11

打赏
举报

我现在去注释。。完了再发一帖

孟子E章 2002-09-11

打赏
举报

下载
inet.chm
里面有详细的

http://www.csdn.net/Expert/TopicView1.asp?id=1004808

qiushuiwuhen 2002-09-11

打赏
举报

他写的还是叫他给你讲吧，解铃还需系令人，呵呵

只简要说一下不常用的，其他应该就没什么难懂的

attachEvent映射事件方法处理，第一个参数为事件，第二个参数为处理方法
.uniqueID 产生该控件在这文档document中唯一标识
downpos{offsetX:0,offsetY:0}; 哈希表或集合，可通过downpos.offsetX调用
runtimeStyle即时样式,和属性style同时作用当时样式,但不修改属性style
detachEvent和attachEvent相反，即取消事件和方法的联系

Lostinet 2002-09-11

打赏
举报

你上面的是老的代码也。。。

上MSDN找参考
先把下面的东西搞定

position

offsetParent
offsetLeft
offsetTop
offsetX
offsetY
clientX
clientY

attachEvent
detachEvent
getElementById
setCapture
releaseCapture

xizi2008 2002-09-11