Examples of drag and drop recommended in Pro Javascript techniques book: Http://boring.youngpup.net/2001/domdrag
<ptml> <pead> <title>Drag</title> <style type= "Text/css" > </style> <script ty Pe= "Text/javascript" > var Drag = {//Current Drag object Obj:null,//Initialize Init:function (id) {var o = Document.get Elementbyid (ID); When onmousedown began to drag o.onmousedown = Drag.start; }, Start:function (e) {var o = Drag.obj = this; Lastmousex,lastmousey records the last mouse position o.lastmousex = Drag.getevent (e). x; O.lastmousey = Drag.getevent (e). Y; When OnMouseMove begins to move document.onmousemove = Drag.move; When onmouseup terminates drag document.onmouseup = Drag.end; }, Move:function (e) {var o = drag.obj; DX, DY indicates the distance of mouse movement var dx = drag.getevent (e). X-o.lastmousex; var dy = drag.getevent (e). Y-o.lastmousey; Because element.style.left usually return the result is ' 200px ' form, so convert var left = parseint (o.style.left) + dx with parseint; var top = parseint (o.style.top) + dy; O.style.left = left; O.style.top = top; O.lastmousex = Drag.getevent (e). x; O.lastmousey = Drag.getevent (e). Y; }, End:function (e) {Document.onmousemove = null; Document.onmouseup = null; Drag.obj = null; },//auxiliary functions, handling the different event models of IE and FF Getevent:function (e) {if (typeof e = = ' undefined ') { e = window.event; }//alert (E.x?e.x:e.layerx); if (typeof e.x = = ' undefined ') {e.x = e.layerx;//copied n times, csdn becomes ee.x. } if (typeof e.y = = ' undefined ') {e. y = e.layery;//copied n times, to the csdn becomes ee.x} return e; } }; </script> </pead> <body> <div id= "R" ></div> <div id= "G" ></div> <div ID = "B" ></div> </body> <script type= "Text/javascript" >//Test code start to make three div with drag and drop capabilities. Drag.init (' R '); Drag.init (' G '); Drag.init (' B '); </script> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Package Download Address
