Multiple types of mouse drag and drop effects implemented by JavaScript _ javascript skills

This article mainly introduces a variety of mouse drag and drop effects implemented by JavaScript, and involves related techniques for JavaScript to respond to mouse events and dynamically transform page element attributes. It has some reference value, for more information about how to use JavaScript, see the following example. We will share this with you for your reference. The details are as follows:

This is a JavaScript mouse drag and drop effect code. In this example, you can learn about the trigger object, set the range limit, specify the horizontal and vertical locking of the container size, and obtain and release the focus.

The running effect is as follows:

The Online Demo address is as follows:

Http://demo.jb51.net/js/2015/js-mouse-move-fix-style-codes/

The Code is as follows:

 Drag and Drop EffectScript var isIE = (document. all )? True: false; var $ = function (id) {return "string" = typeof id? Document. getElementById (id): id ;}; var Class ={ create: function () {return function () {this. initialize. apply (this, arguments) ;}} var Extend = function (destination, source) {for (var property in source) {destination [property] = source [property] ;}} var Bind = function (object, fun) {return function () {return fun. apply (object, arguments) ;}}var BindAsEventListener = function (object, fun) {re Turn function (event) {return fun. call (object, (event | window. event) ;}} var CurrentStyle = function (element) {return element. currentStyle | document. defaultView. getComputedStyle (element, null);} function addEventHandler (oTarget, sEventType, fnHandler) {if (oTarget. addEventListener) {oTarget. addEventListener (sEventType, fnHandler, false);} else if (oTarget. attachEvent) {oTarget. attachEvent (" On "+ sEventType, fnHandler);} else {oTarget [" on "+ sEventType] = fnHandler; }}; function removeEventHandler (oTarget, sEventType, fnHandler) {if (oTarget. removeEventListener) {oTarget. removeEventListener (sEventType, fnHandler, false);} else if (oTarget. detachEvent) {oTarget. detachEvent ("on" + sEventType, fnHandler);} else {oTarget ["on" + sEventType] = null ;}}; // Drag-and-drop 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); 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 ("p ")). style) {width = height = "100%"; backgroundColor = "# fff"; filter = "alpha (opacity: 0)" ;}}// the correction range is this. repair (); addEventHandler (this. _ Handle, "mousedown", BindAsEventListener (this, this. start) ;}, // set the default property SetOptions: function (options) {this. options = {// default value: Handle: "", // set the trigger object (if not set, use the drag-and-drop object) Limit: fals E, // whether to set the range limit (when it is true, the following parameter is useful, it can be a negative number) mxLeft: 0, // The restriction on the left side of mxRight: 9999, // the restriction on the right side of mxTop: 0, // The mxBottom: 9999 is restricted on the top, // The mxContainer: "" is restricted on the bottom, // LockX: false is restricted on the container, // whether to lock LockY: false in the horizontal direction, // whether to Lock the vertical drag Lock: false, // whether to Lock the Transparent: false, // whether the onStart: function () {}, // when starting to move, execute onMove: function () {}, // execute onStop: function () {}// execute when moving ends}; Extend (this. options, options | {}) ;}, // you can drag Start: function (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); addEventHandler (effece Nt, "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 position to relative for relative positioning and set it before obtaining the offset! This. _ mxContainer | CurrentStyle (this. _ mxContainer ). position = "relative" | (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. onStop () ;}}; script

Drag and Drop status: script var Drag = new drag ("idDrag", {mxContainer: "idContainer", Handle: "idHandle", Limit: true, onStart: function () not started () {$ ("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

I hope this article will help you design JavaScript programs.