A very good JavaScript Control Div layer drag/drag code
Last Update:2018-12-07
Source: Internet
Author: User
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> Code </Title> Program VaR drag = Class. create (); drag. prototype = {// drag-and-drop object initialize: function (drag, options) {This. drag = $ (drag); // drag and drop the object this. _ x = This. _ y = 0; // record the position of the cursor relative to the drag-and-drop object this. _ marginleft = This. _ margintop = 0; // record margin // event object (used to bind the removal event) This. _ fm = bindaseventlistener (this, this. move); this. _ FS = BIND (this, this. stop); this. setoptions (options); // demo by/This. limit = !! This. options. limit; this. mxleft = parseint (this. options. mxleft); this. mxright = parseint (this. options. mxright); this. mxtop = parseint (this. options. mxtop); this. mxbottom = parseint (this. options. mxbottom); this. lockx = !! This. Options. lockx; this. locky = !! This. Options. locky; this. Lock = !! This. options. lock; this. onstart = This. options. onstart; this. onmove = This. options. onmove; this. onstop = This. options. onstop; this. _ HANDLE = $ (this. options. handle) | this. drag; this. _ mxcontainer = $ (this. options. mxcontainer) | NULL; this. drag. style. position = "absolute"; // transparent if (isie &&!! This. options. transparent) {// fill in the drag-and-drop object with (this. _ HANDLE. appendchild (document. createelement ("Div ")). style) {width = height = "100%"; backgroundcolor = "# fff"; filter = "alpha (opacity: 0)"; fontsize = 0 ;}} // correction range: This. repair (); addeventhandler (this. _ HANDLE, "mousedown", bindaseventlistener (this, this. start) ;}, // set the default property setoptions: function (options) {This. options = {// default value: handle: "", // you can specify the trigger object. Put the object) limit: false, // whether to set the range limit (when it is true, the following parameter is useful, can be a negative number) mxleft: 0, // the left side of the limit mxright: 9999, // mxtop: 0 on the right, // The mxbottom: 9999 on the top, // The mxcontainer: "" on the bottom, // specify the lockx: false in the container, // whether to lock the horizontal drag locky: false, // whether to lock the vertical drag lock: false, // whether to lock the transparent: false, // whether to transparent onstart: function () {}, // onmove: function () {}when starting to move, // onstop: function () {}// execute when moving }; extend (this. options, options | |{}) ;}, // you can drag start: Fun. Ction (oevent) {If (this. lock) {return;} This. repair (); // record the position of the cursor relative to the drag-and-drop object this. _ x = oevent. clientx-this. drag. offsetleft; this. _ y = oevent. clienty-this. drag. offsettop; // record margin this. _ marginleft = parseint (currentstyle (this. drag ). marginleft) | 0; this. _ margintop = parseint (currentstyle (this. drag ). margintop) | 0; // stop addeventhandler (document, "mousemove", this. _ FM); addeve Nthandler (document, "mouseup", this. _ fS); If (isie) {// addeventhandler (this. _ HANDLE, "losecapture", this. _ fS); // set the mouse to capture this. _ HANDLE. setcapture ();} else {// addeventhandler (window, "Blur", this. _ fS); // block the default action oevent. preventdefault () ;}; // additional program this. onstart () ;}, // corrected range repair: function () {If (this. limit) {// corrected the error range parameter This. mxright = math. max (this. mxright, this. mxleft + this. drag. offsetwidth); This. mxbottom = math. max (this. mxbottom, this. mxtop + this. drag. offsetheight); // if there is a container, you must set the position to relative or absolute to locate the container relative or absolute, and set it before obtaining the offset! This. _ mxcontainer | currentstyle (this. _ mxcontainer ). position = "relative" | currentstyle (this. _ mxcontainer ). position = "absolute" | (this. _ mxcontainer. style. position = "relative") ;}}, // drag move: function (oevent) {// determine whether to lock if (this. lock) {This. stop (); Return ;}; // clear and select window. getselection? Window. getselection (). removeallranges (): Document. selection. empty (); // set the moving parameter var ileft = oevent. clientx-this. _ x, iTOP = oevent. clienty-this. _ y; // set the range limit if (this. limit) {// set the range parameter var mxleft = This. mxleft, mxright = This. mxright, mxtop = This. mxtop, mxbottom = This. mxbottom; // if the container is set, modify the IF (!! This. _ mxcontainer) {mxleft = math. max (mxleft, 0); mxtop = math. max (mxtop, 0); mxright = math. min (mxright, this. _ mxcontainer. clientwidth); mxbottom = math. min (mxbottom, this. _ mxcontainer. clientheight) ;}; // fixed the moving parameter ileft = math. max (math. min (ileft, mxright-this. drag. offsetwidth), mxleft); iTOP = math. max (math. min (iTOP, mxbottom-this. drag. offsetheight), mxtop);} // set the location and modify the margin if (! This. lockx) {This. Drag. style. Left = ileft-This. _ marginleft + "PX";} If (! This. locky) {This. drag. style. top = iTOP-this. _ margintop + "PX";} // additional program this. onmove () ;}, // stop dragging stop: function () {// remove event removeeventhandler (document, "mousemove", this. _ FM); removeeventhandler (document, "mouseup", this. _ fS); If (isie) {removeeventhandler (this. _ HANDLE, "losecapture", this. _ fS); this. _ HANDLE. releasecapture ();} else {removeeventhandler (window, "Blur", this. _ fS) ;}; // additional program this. ONS Top () ;};</SCRIPT> <style ># idcontainer {border: 10px solid #990000; width: 600px; Height: 300px ;}# iddrag {border: 5px solid # c4e3fd; Background: # c4e3fd; width: 50px; Height: 50px; top: 50px; left: 50px;} # idhandle {cursor: move; Height: 25px; Background: # 0000ff; overflow: hidden ;} </style> <Div id = "idcontainer"> <Div id = "iddrag"> <Div id = "idhandle"> </div> <input id = "idreset" type = "button" value = "reset"/> <Input id = "idlock" type = "button" value = "locked"/> <input id = "idlockx" type = "button" value = "locked level"/> <Input id = "idlocky" type = "button" value = ""/> <input id = "idlimit" type = "button" value = ""/> <Input id = "idlimitoff" type = "button" value = "unlock range"/> <br/> Drag and Drop status: <span id = "idshow"> not started </span> <SCRIPT> var drag = new drag ("iddrag", {mxcontainer: "idcontainer", handle: "idhandle ", limit: True, onstart: funct Ion () {$ ("idshow "). innerhtml = "Start Drag and Drop" ;}, onmove: function () {$ ("idshow "). innerhtml = "Left:" + this. drag. offsetleft + "; top:" + this. drag. offsettop ;}, onstop: function () {$ ("idshow "). innerhtml = "End Drag and Drop" ;}}); $ ("idreset "). onclick = function () {drag. limit = true; drag. mxleft = drag. mxtop = 0; drag. mxright = drag. mxbottom = 9999; drag. lockx = drag. locky = drag. lock = false;} $ ("idlock "). onclick = function () {Drag. lock = true;} $ ("idlockx "). onclick = function () {drag. lockx = true;} $ ("idlocky "). onclick = function () {drag. locky = true;} $ ("idlimit "). onclick = function () {drag. mxright = drag. mxbottom = 200; drag. limit = true;} $ ("idlimitoff "). onclick = function () {drag. limit = false ;}</SCRIPT> </body>
