The original Published time: 2009-12-02--from my Baidu article [imported by moving tools]
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<style>
Body
{
font-size:12px;
Color: #333333;
border:0px solid blue;
}
Div
{
Position:absolute;
Background-color: #c3d9ff;
margin:0px;
padding:5px;
border:0px;
width:100px;
height:100px;
}
</style>
<body>
<script type= "Text/javascript" >
function drag (o,s)
{
if (typeof o = = "string") O = document.getElementById (o);
o.orig_x = parseint (o.style.left)-document.body.scrollLeft;
o.orig_y = parseint (o.style.top)-document.body.scrollTop;
O.orig_index = O.style.zindex;
O.onmousedown = function (a)
{
This.style.cursor = "Move";
This.style.zIndex = 10000;
var d=document;
if (!a) a=window.event;
var x = A.clientx+d.body.scrollleft-o.offsetleft;
var y = a.clienty+d.body.scrolltop-o.offsettop;
Author:hi.baidu.com/handboy
D.ondragstart = "return false;"
D.onselectstart = "return false;"
D.onselect = "Document.selection.empty ();"
if (o.setcapture)
O.setcapture ();
else if (window.captureevents)
Window.captureevents (event.mousemove| Event.mouseup);
D.onmousemove = function (a)
{
if (!a) a=window.event;
O.style.left = A.clientx+document.body.scrollleft-x;
O.style.top = a.clienty+document.body.scrolltop-y;
o.orig_x = parseint (o.style.left)-document.body.scrollLeft;
o.orig_y = parseint (o.style.top)-document.body.scrollTop;
}
d.onmouseup = function ()
{
if (o.releasecapture)
O.releasecapture ();
Else if (window.captureevents)
Window.captureevents (event.mousemove| Event.mouseup);
D.onmousemove = null;
D.onmouseup = null;
D.ondragstart = null;
D.onselectstart = null;
D.onselect = null;
O.style.cursor = "normal";
O.style.zindex = O.orig_index;
}
}
if (s)
{
var orig_scroll = Window.onscroll?window.onscroll:function () {};
Window.onscroll = function ()
{
Orig_scroll ();
O.style.left = o.orig_x + document.body.scrollLeft;
O.style.top = o.orig_y + document.body.scrollTop;
}
}
}
</script>
<div id= "Div1" style= "left:10px;top:10px;" >DIV1: I can be dragged </div>
<div id= "Div2" style= "Left:120px;top:10px;background-color: #f3d9ff" >div2: Come and drag Me </div>
<div id= "Div3" style= "Left:230px;top:10px;background-color: #c3ffff" >div3: I'll drag </div>
<div id= "Div4" style= "Left:10px;top:120px;background-color: #c3d944" >div4: I can slide with the window, drag me to the bottom, then scroll the page to see </div >
<div id= "div5" style= "Left:120px;top:120px;background-color: #f3d944" > Author: handboy
<a href=http://www.longbill.cn Target=_blank>hi.baidu.com/handboy </a>
</div>
<div id= "Div6" style= "Left:230px;top:120px;background-color: #e3f944; width:200px;" > Parameter Description:
Drag (obj [, scroll]);
OBJ: The ID of the object or the object itself;
Scroll (optional): Whether the object slides with the window drag, default to No
right mouse button to view source code
</div>
<script type= "Text/javascript" >
Drag ("Div1");
Drag ("Div2");
Drag ("Div3");
Drag ("Div4", 1);
Drag ("Div5", 1);
Drag ("Div6", 1);
</script>
</body>
Drag layer Drag div package JS seemingly incompatible FF, depressed