Skynet

< html > ??
< head >< title > 拖動效果函數演示?by?Longbill.cn </ title > ??
< style > ??

div??
{ ??
????position? : ?absolute ; ??
????background-color? : ?#c3d9ff ; ??
????margin? : ?0px ; ??
????padding? : ?5px ; ??
????border? : ?0px ; ??
????width? : ?100px ; ??
????height : 100px ; ??
} ??
</ style >

</ head > ??
< body > ??
????
????
< script > ??
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:?www.longbill.cn??
????????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:我可以被拖動 </ div > ??
< div? id ="div2" ?style ="left:120px;top:10px;background-color?:?#f3d9ff" > div2:來拖我呀 </ div > ??
< div? id ="div3" ?style ="left:230px;top:10px;background-color?:?#c3ffff" > div3:我隨便你拖 </ div > ??
< div? id ="div4" ?style ="left:10px;top:120px;background-color?:?#c3d944" > div4:我可以隨窗口滑動，把我拖到最下面，然后滾動網頁看看 </ div > ??
< div? id ="div5" ?style ="left:120px;top:120px;background-color?:?#f3d944" > 作者:?Longbill
< a? href =http://www.longbill.cn? target =_blank > www.longbill.cn </ a > ??
</ div > ??
< div? id ="div6" ?style ="left:230px;top:120px;background-color?:?#e3f944;width:200px;" > 參數說明:
??
drag(obj?[,scroll]);
??
obj:對象的id或對象本身;
??
scroll(可選):對象是否隨窗口拖動而滑動，默認為否
??
鼠標右鍵查看源代碼??
</ div > ??


< script > ??
drag( " div1 " );??
drag( " div2 " );??
drag( " div3 " );??
drag( " div4 " , 1 );??
drag( " div5 " , 1 );??
drag( " div6 " , 1 );??


</ script > ??

</ body > ?