IGoogle's module drag layer drag, igoogle module drag
<! 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"/>
<Style type = "text/css">
* {Margin: 0px; padding: 0px ;}
Body {position: relative; width: 780px; height: 800px; border: 1px solid red}
. Drag {width: 200px; height: 100px; border: 1px solid #000; margin: 20px; background: # fff}
. Drag h1 {margin: 0px; padding: 0px; font-size: 12px; height: 18px; line-height: 18px; background: # E0E7F3; text-indent: 20px; cursor: move ;}
. Center {margin: 200px; border: 3px solid red}
</Style>
<Script type = "text/javascript"> </script>
<Title> iGoogle Div Drag module dragging </title>
</Head>
<Body>
<Div class = "drag">
<H1> <strong> popper. w'dragclass </strong> </Div>
<Div class = "drag">
<H1> www.999jiujiu.com </Div>
<Div class = "drag">
<H1> <strong> www.999jiujiu.com </strong> </Div>
<Div class = "drag"> <Div class = "drag"> <Div class = "drag"> <Div class = "drag"> <Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</Body>
</Html>
<Script type = "text/javascript">
/*
Author: popper. w
Version: v2.0
*/
Var DragZindexNumber = 0;
Function drag (obj ){
Var ox, oy, ex, xy, tag = 0, mask = 0;
If (tag = 0 ){
Obj. onmousedown = function (e)
{
If (mask = 1) {return ;}
Obj. style. zIndex = DragZindexNumber ++;
Transp (obj, "start ")
Tag = 1;
Var e = e | window. event;
Ex = getEventOffset (e). offsetX;
Ey = getEventOffset (e). offsetY;
Ox = parseInt (obj. offsetLeft );
Oy = parseInt (obj. offsetTop );
TempDiv = document. createElement ("div ");
With (tempDiv. style)
{
Width = obj. offsetWidth + "px ";
Height = obj. offsetHeight + "px ";
Border = "1px dotted red ";
Position = "absolute ";
Left = obj. offsetLeft + "px ";
Top = obj. offsetTop + "px ";
ZIndex = 999;
}
Document. body. appendChild (tempDiv );
This. ele = tempDiv;
FDragStart (tempDiv );
Document. body. onmousemove = function (e ){
If (tag = 1)
{
Var e = e | window. event;
TempDiv. style. left = parseInt (e. clientX)-ex + "px ";
TempDiv. style. top = parseInt (e. clientY)-ey + "px ";
}
Else {if (! TempDiv = null) tempDiv. parentNode. removeChild (tempDiv )}
}
TempDiv. onmouseup = function (e)
{
Var e = e | window. event;
FDragEnd (tempDiv );
Obj. style. position = "absolute ";
Movie (obj, parseInt (e. clientX)-ex-19, parseInt (e. clientY)-ey-20 );
TempDiv. parentNode. removeChild (tempDiv );
Tag = 0;
}
}
}
}
Function movie (o, l, t ){
Var a = 1;
Mask = 1;
Var ol = parseInt (o. offsetLeft );
Var ot = parseInt (o. offsetTop );
Var iTimer = setInterval (function (){
If (a = 10)
{
Transp (o, "end ");
Mask = 0;
ClearInterval (iTimer );
}
O. style. left = ol + a * (l-ol)/10 + "px ";
O. style. top = ot + a * (t-ot)/10 + "px ";
A ++;
}, 20 );
}
Function fCancleBubble (e)
{
Var e = window. event | e;
If (e. preventDefault) e. preventDefault ();
Else e. returnValue = false;
}
Function transp (o, mode ){
If (mode = "start "){
If (document. all ){
O. style. filter = "Alpha (Opacity = 50 )";
} Else {
O. style. opacity = 0.5;
}
}
Else {
If (document. all ){
O. style. filter = "Alpha (Opacity = 100 )";
} Else {
O. style. opacity = 1;
}
}
}
Function getOffset (evt)
{
Var target = evt.tar get;
If (target. offsetLeft = undefined)
{
Target = target. parentNode;
}
Var pageCoord = getPageCoord (target );
Var eventCoord =
{
X: window. pageXOffset + evt. clientX,
Y: window. pageYOffset + evt. clientY
};
Var offset =
{
OffsetX: eventCoord. x-pageCoord. x,
OffsetY: eventCoord. y-pageCoord. y
};
Return offset;
}
Function getPageCoord (element)
{
Var coord = {x: 0, y: 0 };
While (element)
{
Coord. x + = element. offsetLeft;
Coord. y + = element. offsetTop;
Element = element. offsetParent;
}
Return coord;
}
Function getEventOffset (evt)
{
Var msg = "";
If (evt. offsetX = undefined)
{
Var evtOffsets = getOffset (evt );
Msg = {offsetX: evtOffsets. offsetX, offsetY: evtOffsets. offsetY };
}
Else
{
Msg = {offsetX: evt. offsetX, offsetY: evt. offsetY };
}
Return msg;
}
Function fDragStart (XEle)
{
Switch (fCkBrs ())
{
Case 3:
Window. getSelection (). removeAllRanges ();
Break;
Default:
XEle. setCapture ();
Break;
}
}
Function fDragEnd (XEle)
{
Switch (fCkBrs ())
{
Case 3:
Window. getSelection (). removeAllRanges ();
Break;
Default:
XEle. releaseCapture ();
Break;
}
}
Function fCkBrs ()
{
Switch (navigator. appName)
{
Case 'Opera ': return 2;
Case 'netscape ': return 3;
Default: return 1;
}
}
Var element = document. getElementsByTagName ("div ");
For (var I = 0; I <element. length; I ++ ){
If (element [I]. className = "drag "){
Drag (element [I])}
}
</Script>