shawl.qiu Javascript 元素拖曳类 Dragging class v1.0

最新推荐文章于 2024-08-08 08:32:11 发布

btbtd

最新推荐文章于 2024-08-08 08:32:11 发布

阅读量2.5k

点赞数

文章标签： javascript class function null div opera

本文链接：https://blog.csdn.net/btbtd/article/details/1613846

版权

Me Script 同时被 2 个专栏收录

88 篇文章 0 订阅

订阅专栏

Me Script function library

34 篇文章 0 订阅

订阅专栏

shawl.qiu Javascript 元素拖曳类 Dragging class v1.0

说明:
其实早先也用 js写过一个相关函数, fDragging.
见: http://blog.csdn.net/btbtd/archive/2006/11/10/1377810.aspx

不过说实在的, 真正应用起来还是有点麻烦的, 首先就是那个 css 的 position: absolute, 这个属性一般很难控制, 调用起来也够麻烦的.

因此嘛, 在鄙懒人一懒到底的精神支持下, 就写了这么个类出来了.
调用和设置, 那可不是一般的容易...
唉, 懒人没话说了, over.

目录:
1. 类 Dragging 及调用

shawl.qiu
2007-05-17
http://blog.csdn.net/btbtd

下载:
http://shawl.qiu.googlepages.com/shawl.qiu_js_class_Dragging_v1.0.htm.7z

演示:
http://shawl.qiu.googlepages.com/shawl.qiu_js_class_Dragging_v1.0.htm

内容:
1. 类 Dragging 及调用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template</title>
<script type="text/javascript">
//<![CDATA[
/*-----------------------------------------------------------------------------------*/
* shawl.qiu javascript Dragging class v1.0
/*-----------------------------------------------------------------------------------*/
//---------------------------------begin class Dragging()-------------------------------//
function Dragging()
{ // shawl.qiu code
//------------------------------------begin public variable
//---------------begin about
this.au = {}
this.au.Subject = "shawl.qiu javascript Dragging class";
this.au.Version = "v1.0";
this.au.Name = "shawl.qiu";
this.au.Email = "shawl.qiu@gmail.com";
this.au.Blog = "http://blog.csdn.net/btbtd";
this.au.CreatedDate = "2007-5-17";
this.au.Update = {};
this.au.Update["1"] = "";
//---------------end about
this.Set = [];
this.AddElement = fAddElement;
this.Count = 1;
//------------------------------------end public variable
//------------------------------------begin private variable
var Tl = this;
//------------------------------------end private variable
//------------------------------------begin public method
this.Go = fGo;
//------------------------------------end public method
//------------------------------------begin private method
function fGo()
{
if(Tl.Set.length==0)
{
alert("对象集合为空!");
return false;
} // end if
var Debug = true;
for(var i=0, j=Tl.Set.length; i<j; i++)
{
var Obj = Tl.Set[i];
var Inherit = Obj["Inherit"];
with(Obj.style)
{
top = fFindPos(Obj, true)+"px";
left = fFindPos(Obj, false)+"px";
}
}
for(var i=0, j=Tl.Set.length; i<j; i++)
{
var Obj = Tl.Set[i];
var Inherit = Obj["Inherit"];
with(Obj.style)
{
position = "absolute";
}
defaultStatus =
" Obj.clientTop: "+Obj.offsetTop
+" Obj.clientLeft: "+Obj.offsetLeft
+" fFindPos(Obj, true): "+fFindPos(Obj, true)
+" fFindPos(Obj, false): "+fFindPos(Obj, false)
;
if(Debug)
{
defaultStatus =
"typeof(Obj): "+typeof(Obj)
+" Inherit: "+Inherit
;
} // end if
Obj.onmousedown =
function()
{
this.onmousemove =
function(e)
{
if(!e) e = window.event;
var Parent = this.parentNode;
if(this["Inherit"])
{
var Width = this.offsetWidth;
var Height = this.offsetHeight;
var eX = e.clientX;
var eY = e.clientY;
var iPTop = fFindPos(Parent, true);
var iPLeft = fFindPos(Parent, false);
var iPRight = fFindPos(Parent, false)+Parent.offsetWidth;
var iPBottom = fFindPos(Parent, true)+Parent.offsetHeight;
var iRight = this.offsetLeft+this.offsetWidth;
var iBottom = this.offsetTop+this.offsetHeight;
// check top
if(this.offsetTop<iPTop)
{
this.style.top = iPTop+"px";
return;
}
// check left
if(this.offsetLeft<iPLeft)
{
this.style.left = iPLeft+"px";
return;
}
// check right
if(iRight>iPRight)
{
this.style.left = iPRight-this.offsetWidth+"px";
return;
}
// check bottom
if(iBottom>iPBottom)
{
this.style.top = iPBottom-this.offsetHeight+"px";
return;
}
with(this.style)
{
top = eY-(Height/2) +"px";
left = eX-(Width/2) +"px";
zIndex = 9999;
} // end with
defaultStatus =
" this.offsetLeft: "+this.offsetLeft
+" this.offsetTop: "+this.offsetTop
+" iPTop: "+iPTop
+" iPLeft: "+iPLeft
+" iPRight: "+iPRight
+" iPBottom: "+iPBottom
+" iRight: "+iRight
+" iBottom: "+iBottom
;
}
else
{
var Width = this.offsetWidth;
var Height = this.offsetHeight;
var eX = e.clientX;
var eY = e.clientY;
with(this.style)
{
position = "absolute";
top = eY-(Height/2) +"px";
left = eX-(Width/2) +"px";
} // end with
defaultStatus =
" this.offsetLeft: "+this.offsetLeft
+" this.offsetTop: "+this.offsetTop
+" eX: "+eX
+" eY: "+eY
;
}
} // end this.onmousemove
} // end Obj.onmousedown
Obj.onmouseup =
function()
{
this.style.zIndex = 5555;
ClearMouseMove(this);
} // end Obj.onmouseup
} // end for
} // end function fGo
function ClearMouseMove(Obj)
{
if(Obj!=null)
{
Obj.onmousemove = null;
}
}
function fAddElement(sId, bInherit)
{
var Obj;
if(typeof(sId)=="string")
{
Obj = document.getElementById(sId);
if(Obj==null)
{
alert("无法获得 id 为 : "+sId+" 的元素!");
return;
} // end if 1
}
else if(typeof(sId)=="object")
{
Obj = sId;
}
else
{
alert("无法识别要获取的元素!");
return false;
}
if(!bInherit) bInherit = false;
var iIndex = Tl.Set.length;
Obj["Inherit"] = bInherit;
Tl.Set[iIndex] = Obj;
} // end function fAddElement
function fFindPos(oEle, bReturnY)
{ // shawl.qiu script
if(!oEle)
{
alert("对象不能为空!");
return;
}
if(bReturnY)
{
return fFindPosY(oEle);
}
else
{
return fFindPosX(oEle);
}
function fFindPosX(oEle)
{ // shawl.qiu script
var iLeft = 0;
if(oEle.offsetParent)
{
while(true)
{
iLeft += oEle.offsetLeft;
if(!oEle.offsetParent)
{
break;
} // end if 1
oEle = oEle.offsetParent;
} // end while
}
else if(oEle.x)
{
iLeft += oEle.x;
}
return iLeft;
} // end function fFindPosX
function fFindPosY(oEle)
{ // shawl.qiu script
var iTop = 0;
if(oEle.offsetParent)
{
while(true)
{
iTop += oEle.offsetTop;
if(!oEle.offsetParent)
{
break;
} // end if 1
oEle = oEle.offsetParent;
} // end while
}
else if(oEle.y)
{
iTop += oEle.y;
}
return iTop;
} // end function fFindPosX
} // end function fFindPos
function fCkBrs()
{// shawl.qiu script
switch (navigator.appName)
{
case 'Opera': return 2;
case 'Netscape': return 3;
default: return 1;
}
} // end function fCkBrs
//------------------------------------end private method
} // shawl.qiu code
//---------------------------------end class Dragging()---------------------------------//
onload =
function()
{
var dragging = new Dragging();
// function fAddElement(sId, bInherit)
dragging.AddElement("m1", true);
dragging.AddElement("m2", false);
dragging.Go();
document.getElementById("subject").innerHTML = dragging.au.Subject+" "+dragging.au.Version;
dragging = null;
}
//]]>
</script>
</head>
<body>
<div style="width:80%; height:500px; border:1px dotted blue; background-color:white; margin:2% auto; " >
<div id="subject" style="text-align:center; font-weight:bold; padding:5px;"> </div>
<div id="m1" style="width:200px; height:80px; border:1px dotted mistyrose; padding:2px 5px;">
inherit .............
</div>
 
<div id="m2" style="width:200px; height:80px; border:1px dotted mistyrose;padding:2px 5px;">
no inherit .............
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

btbtd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
shawl.qiu Javascript 元素拖曳类 Dragging class v1.0

shawl.qiu Javascript 元素拖曳类 Dragging class v1.0说明:其实早先也用 js写过一个相关函数, fDragging.见: http://blog.csdn.net/btbtd/archive/2006/11/10/1377810.aspx不过说实在的, 真正应用起来还是有点麻烦的, 首先就是那个 css 的 position: absolute, 这个
复制链接

扫一扫