<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>d class </title> <style type=" text/css "> HTML, body {margin:0; } </style> <script type= "Text/javascript" >!! window.__definegetter__ &&!/msie/.test (navigator.useragent) && function () {!window.opera && window.__definegetter__ (' event ', function () {//Compatible event object var o = Arguments.callee; do {if (O.arguments[0] instanceof Event) return o.arguments[0]; while (o = O.caller); return null; }); window.attachevent = Document.prototype.attachEvent = Element.prototype.attachEvent = function (type, listener, capture {//compatible attachevent method return This.addeventlistener (New String (type). substr (2), Listener, capture | | false); }; Window.detachevent = Document.prototype.detachEvent = Element.prototype.detachEvent = function (type, listener, capture) {//compatible DetachEvent method Retu RN This.removeeventlistener (new String (type). substr (2), Listener, capture | | false); }; }(); var D = {//Pull Grant class Lock:false, Dom:function () {//document related property return {Left:document.documentElement.scrollL EFT, Top:document.documentElement.scrollTop, Width:document.documentElement.clientWidth, Height:document.docum Entelement.clientheight, body:document.documentElement}; }, Mos:function (e) {//Get mouse absolute position var dom = This.dom (); return {' x ': Dom.left + e.clientx, ' y ': Dom.top + E.clienty}}, Pos:function (o) {//Get element absolute position var x = 0, y = 0 ; do {x + + o.offsetleft, y + = O.offsettop;} while (o = o.offsetparent); return {' X ': x, ' y ': y}; }, Start:function (element, Starteventhandler, Moveeventhandler, Stopeventhandler) {//Move start if (This.lock) return; else This.lock = true; First Lock security ... :D var pos = This.pos (ELement//Element position, MoS = This.mos (window.event)//mouse position, eventhandlers = {mf:null, ef:null}//Event log, property = {x : Mos.x-pos.x, Y:mos.y-pos.y, left:pos.x, TOP:POS.Y}//attributes, _MF = This.move (Moveeventhandler, property)//Moved Process event closure, _ef = This.stop (element, Stopeventhandler, eventhandlers); Move Stop event closure try {document.selection && document.selection.empty && (Document.selection.empty (), 1) | | wi Ndow.getselection && window.getselection (). Removeallranges (); catch (exp) {} document.attachevent (' onmousemove ', _MF); Mouse Mobile Document.attachevent (' onmouseup ', _ef); Mouse release element.setcapture? (Element.setcapture (), element.attachevent (' onlosecapture ', _ef)): window.attachevent (' onblur ', _ef); Mouse capture loss is released EVENTHANDLERS.MF = _MF, Eventhandlers.ef = _ef; Starteventhandler && Starteventhandler (property); Pass directly to the past ... Please pollute by mistake--}, Move:function (Moveeventhandler, property) {//mobile var WC = this; return function (e) {var MoS =Wc.mos (E | | window.event), dom = Wc.dom (); Window.getselection && window.getselection (). Removeallranges (); /msie/.test (navigator.useragent) && function () {//ie scrolling if (mos.x > Dom.left + dom.width) dom.body.scrollLef t = mos.x-dom.width; else if (Mos.x < dom.left) Dom.body.scrollLeft = mos.x; if (Mos.y > Dom.top + dom.height) Dom.body.scrollTop = mos.y-dom.height; else if (Mos.y < dom.top) Dom.body.scrollTop = Mos.y; }(); Property.left = mos.x-property.x, property.top = mos.y-property.y; Moveeventhandler && Moveeventhandler (property); Pass directly to the past ... Please pollute by mistake--; }; }, Stop:function (element, Stopeventhandler, eventhandlers) {//move over var WC = this; return function (e) {document.detachevent (' onmousemove ', EVENTHANDLERS.MF); Document.detachevent (' onmouseup ', eventhandlers.ef); Element.setcapture? (Element.detachevent (' onlosecapture ', Eventhandlers.ef), Element.releasecapture ()): Window.detachevent (' onblur ', Eventhandlers.ef); Wc.lock = false; All the incidents were killed. Stopeventhandler && Stopeventhandler (); }; } }; </script> </pead> <body> <div > <div style= "Position:absolute; width:20px; height:20px; line-height:20px; left:50%; top:50%; margin:-10px 0 0-10px; Background-color: #F00; Text-align:center; Cursor:move; " Onmousedown= "var WC = this;d.start (WC, NULL, function (property) {var node = Wc.parentnode; var a = d.pos (node), B = d.pos (WC); Node.style.left = property.left-b.x + a.x + ' px '; Node.style.top = property.top-b.y + a.y + ' px '; }, NULL); > Drag </div> </div> <div style= "width:50px; height:50px; line-height:50px; Text-align:center; Background-color: #F00; Position:absolute; Cursor:move; " Onmousedown= "var WC = this;d.start (WC, NULL, function (property) {Wc.style.left = property.left + ' px '; Wc.style.top = property.top + ' px '; }, NULL); > Drag </div> <div ></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
