<ptml> <pead><title> Drag effect function demo by longbill.cn</title> <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> </pead> <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" >DIV1: I can be dragged </div> <div id= "Div2" >div2: Come and drag Me </div > <div id= "div3" >div3: I'll do whatever you want. </div> <div id= "Div4" >div4: I can slide with the window, drag me to the bottom, then scroll the page to see </div> & Lt;div id= "Div5" > Author: Longbill www.longbill.cn </div> <div id= "DIV6" > Parameter description: Drag (obj [, scroll]); OBJ: The ID of the object or the object itself; Scroll (optional): Whether the object slides with the window, defaults to the right mouse button to view the source code </div> <script> Drag ("Div1"); Drag ("Div2"); Drag ("Div3"); Drag ("Div4", 1); Drag ("Div5", 1); Drag ("Div6", 1); </script> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
