JavaScript method to implement proportional drag and scale of the Selection box _ javascript tips-js tutorial

This article mainly introduces how to implement proportional drag and scale of the Selection box in JavaScript, and provides features such as proportional scaling and minimum range setting, it has some reference value for adding, listening to javascript events, dynamic operation of page elements, and response to mouse events, for more information about how to scale and drag a selection box in JavaScript, see the following example. Share it with you for your reference. The details are as follows:

Here, we can use javascript to pull out a selection box like PS. Many of the methods are worth learning.

Shows the running effect:

The Code is as follows:

 JavaScript drag and Scale 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) {va R args = Array. prototype. slice. call (arguments ). slice (2); return function (event) {return fun. apply (object, [event | window. event]. concat (args); }}var CurrentStyle = function (element) {return element. currentStyle | document. defaultView. getComputedStyle (element, null);} function addEventHandler (oTarget, sEventType, fnHandler) {if (oTarget. addEventListener) {oTarget. addEventListener (sEventType, f NHandler, 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);} el Se {oTarget ["on" + sEventType] = null ;}}; // The zoom program var Resize = Class. create (); Resize. prototype = {// scale object initialize: function (obj, options) {this. _ obj = $ (obj); // scale the object this. _ styleWidth = this. _ styleHeight = this. _ styleLeft = this. _ styleTop = 0; // The style parameter this. _ sideRight = this. _ sideDown = this. _ sideLeft = this. _ sideUp = 0; // coordinate parameter this. _ fixLeft = this. _ fixTop = 0; // locate the parameter this. _ scaleLeft = this. _ scaleTop = 0; // positioning coordinate this. _ mxSet = function () {}; // range setting program this. _ mxRightWidth = this. _ mxDownHeight = this. _ mxUpHeight = this. _ mxLeftWidth = 0; // range parameter this. _ mxScaleWidth = this. _ mxScaleHeight = 0; // proportional range parameter this. _ fun = function () {}; // scale the execution program // obtain the Border Width var _ style = CurrentStyle (this. _ obj); this. _ borderX = (parseInt (_ style. borderLeftWidth) | 0) + (parseInt (_ style. borderRightWidth) | 0); this. _ borderY = (parseInt (_ sty Le. borderTopWidth) | 0) + (parseInt (_ style. borderBottomWidth) | 0); // event object (used to bind the removal event) this. _ fR = BindAsEventListener (this, this. resize); this. _ fS = Bind (this, this. stop); this. setOptions (options); // range limit this. max = !! This. options. max; this. _ mxContainer = $ (this. options. mxContainer) | null; this. mxLeft = Math. round (this. options. mxLeft); this. mxRight = Math. round (this. options. mxRight); this. mxTop = Math. round (this. options. mxTop); this. mxBottom = Math. round (this. options. mxBottom); // width and height limit this. min = !! This. options. min; this. minWidth = Math. round (this. options. minWidth); this. minHeight = Math. round (this. options. minHeight); // scale this proportionally. scale = !! This. options. scale; this. ratio = Math. max (this. options. ratio, 0); this. onResize = this. options. onResize; this. _ obj. style. position = "absolute ";! This. _ mxContainer | CurrentStyle (this. _ mxContainer ). position = "relative" | (this. _ mxContainer. style. position = "relative") ;}, // set the default property SetOptions: function (options) {this. options = {// Max: false by default, // whether to set the range limit (the mx parameter is useful when it is true) mxContainer: "", // specify the mxLeft limit in the container: 0, // mxRight: 9999 on the left, // mxTop: 0 on the right, // mxBottom: 9999 on the top, // Min: false on the bottom, // whether the minimum width and height are limited (the min parameter is useful when the value is true) minWidth: 50, // The minimum width is minHeigh T: 50, // min height Scale: false, // proportional scaling Ratio: 0, // zoom Ratio (width/height) onResize: function () {} // executed during scaling}; Extend (this. options, options | {}) ;}, // Set the trigger object Set: function (resize, side) {var resize =$ (resize), fun; if (! Resize) return; // set switch (side. toLowerCase () {case "up": fun = this. up; break; case "down": fun = this. down; break; case "left": fun = this. left; break; case "right": fun = this. right; break; case "left-up": fun = this. leftUp; break; case "right-up": fun = this. rightUp; break; case "left-down": fun = this. leftDown; break; case "right-down": default: fun = this. rightDown;}; // set trigger Object addEventHandler (resize, "mousedown", BindAsEventListener (this, this. start, fun) ;}, // prepare to scale Start: function (e, fun, touch) {// prevent bubbles (set when used with Drag and Drop) e. stopPropagation? E. stopPropagation (): (e. cancelBubble = true); // sets the execution program this. _ fun = fun; // The style parameter value is this. _ styleWidth = this. _ obj. clientWidth; this. _ styleHeight = this. _ obj. clientHeight; this. _ styleLeft = this. _ obj. offsetLeft; this. _ styleTop = this. _ obj. offsetTop; // coordinates of the Four Edges. this. _ sideLeft = e. clientX-this. _ styleWidth; this. _ sideRight = e. clientX + this. _ styleWidth; this. _ sideUp = e. clientY-this. _ styleHeight; this. _ SideDown = e. clientY + this. _ styleHeight; // top and left positioning parameters this. _ fixLeft = this. _ styleLeft + this. _ styleWidth; this. _ fixTop = this. _ styleTop + this. _ styleHeight; // zoom ratio if (this. scale) {// set the ratio this. ratio = Math. max (this. ratio, 0) | this. _ styleWidth/this. _ styleHeight; // The positioning coordinates of left and top. this. _ scaleLeft = this. _ styleLeft + this. _ styleWidth/2; this. _ scaleTop = this. _ styleTop + this. _ styleHeight/2; }; // Range limit if (this. max) {// 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) ;}; // modify mxRight = Math based on the minimum value. max (mxRight, mxLeft + (this. min? This. minWidth: 0) + this. _ borderX); mxBottom = Math. max (mxBottom, mxTop + (this. Min? This. minHeight: 0) + this. _ borderY); // The function Format is written as this because it needs to be reset during the redirection. _ mxSet = function () {this. _ mxRightWidth = mxRight-this. _ styleLeft-this. _ borderX; this. _ mxDownHeight = mxBottom-this. _ styleTop-this. _ borderY; this. _ mxUpHeight = Math. max (this. _ fixTop-mxTop, this. min? This. minHeight: 0); this. _ mxLeftWidth = Math. max (this. _ fixLeft-mxLeft, this. Min? This. minWidth: 0) ;}; this. _ mxSet (); // you can specify if (this. scale) {this. _ mxScaleWidth = Math. min (this. _ scaleLeft-mxLeft, mxRight-this. _ scaleLeft-this. _ borderX) * 2; this. _ mxScaleHeight = Math. min (this. _ scaleTop-mxTop, mxBottom-this. _ scaleTop-this. _ borderY) * 2 ;};}; // stop addEventHandler (document, "mousemove", this. _ fR); addEventHandler (document, "mouseup", this. _ FS); if (isIE) {addEventHandler (this. _ obj, "losecapture", this. _ fS); this. _ obj. setCapture ();} else {addEventHandler (window, "blur", this. _ fS); e. preventDefault () ;};}, // zoom Resize: function (e) {// clear the selection window. getSelection? Window. getSelection (). removeAllRanges (): document. selection. empty (); // execute the scaling program this. _ fun (e); // set the style. The variable must be greater than or equal to 0. Otherwise, ie has an error with (this. _ obj. style) {width = this. _ styleWidth + "px"; height = this. _ styleHeight + "px"; top = this. _ styleTop + "px"; left = this. _ styleLeft + "px";} // additional program this. onResize () ;}, // scaling program // Up: function (e) {this. repairY (this. _ sideDown-e. clientY, this. _ mxUpHeight); this. repairTop (); This. turnDown (this. down) ;}, // Down: function (e) {this. repairY (e. clientY-this. _ sideUp, this. _ mxDownHeight); this. turnUp (this. up) ;}, // Right: function (e) {this. repairX (e. clientX-this. _ sideLeft, this. _ mxRightWidth); this. turnLeft (this. left) ;}, // Left: function (e) {this. repairX (this. _ sideRight-e. clientX, this. _ mxLeftWidth); this. repairLeft (); this. turnRight (this. right);}, // Right bottom Ri GhtDown: function (e) {this. repairAngle (e. clientX-this. _ sideLeft, this. _ mxRightWidth, e. clientY-this. _ sideUp, this. _ mxDownHeight); this. turnLeft (this. leftDown) | this. scale | this. turnUp (this. rightUp) ;}, // RightUp on the right: function (e) {this. repairAngle (e. clientX-this. _ sideLeft, this. _ mxRightWidth, this. _ sideDown-e. clientY, this. _ mxUpHeight); this. repairTop (); this. turnLeft (this. leftUp) | This. scale | this. turnDown (this. rightDown) ;}, // left lower LeftDown: function (e) {this. repairAngle (this. _ sideRight-e. clientX, this. _ mxLeftWidth, e. clientY-this. _ sideUp, this. _ mxDownHeight); this. repairLeft (); this. turnRight (this. rightDown) | this. scale | this. turnUp (this. leftUp) ;}, // top left LeftUp: function (e) {this. repairAngle (this. _ sideRight-e. clientX, this. _ mxLeftWidth, this. _ sideDown- E. clientY, this. _ mxUpHeight); this. repairTop (); this. repairLeft (); this. turnRight (this. rightUp) | this. scale | this. turnDown (this. leftDown) ;}, // horizontal direction RepairX: function (iWidth, mxWidth) {iWidth = this. repairWidth (iWidth, mxWidth); if (this. scale) {var iHeight = this. repairScaleHeight (iWidth); if (this. max & iHeight> this. _ mxScaleHeight) {iHeight = this. _ mxScaleHeight; iWidth = this. repairScale Width (iHeight);} else if (this. min & iHeight <this. minHeight) {var tWidth = this. repairScaleWidth (this. minHeight); if (tWidth <mxWidth) {iHeight = this. minHeight; iWidth = tWidth;} this. _ styleHeight = iHeight; this. _ styleTop = this. _ scaleTop-iHeight/2;} this. _ styleWidth = iWidth;}, // RepairY in the vertical direction: function (iHeight, mxHeight) {iHeight = this. repairHeight (iHeight, mxHeight); if (this. scale) {Var iWidth = this. repairScaleWidth (iHeight); if (this. max & iWidth> this. _ mxScaleWidth) {iWidth = this. _ mxScaleWidth; iHeight = this. repairScaleHeight (iWidth);} else if (this. min & iWidth <this. minWidth) {var tHeight = this. repairScaleHeight (this. minWidth); if (tHeight <mxHeight) {iWidth = this. minWidth; iHeight = tHeight;} this. _ styleWidth = iWidth; this. _ styleLeft = this. _ scaleLeft-iWi Dth/2;} this. _ styleHeight = iHeight;}, // corner direction RepairAngle: function (iWidth, mxWidth, iHeight, mxHeight) {iWidth = this. repairWidth (iWidth, mxWidth); if (this. scale) {iHeight = this. repairScaleHeight (iWidth); if (this. max & iHeight> mxHeight) {iHeight = mxHeight; iWidth = this. repairScaleWidth (iHeight);} else if (this. min & iHeight <this. minHeight) {var tWidth = this. repairScaleWidth (this. min Height); if (tWidth <mxWidth) {iHeight = this. minHeight; iWidth = tWidth ;}} else {iHeight = this. repairHeight (iHeight, mxHeight);} this. _ styleWidth = iWidth; this. _ styleHeight = iHeight;}, // top RepairTop: function () {this. _ styleTop = this. _ fixTop-this. _ styleHeight;}, // left RepairLeft: function () {this. _ styleLeft = this. _ fixLeft-this. _ styleWidth;}, // height RepairHeight: function (iHe Ight, mxHeight) {iHeight = Math. min (this. Max? MxHeight: iHeight, iHeight); iHeight = Math. max (this. Min? This. minHeight: iHeight, iHeight, 0); return iHeight;}, // width RepairWidth: function (iWidth, mxWidth) {iWidth = Math. min (this. Max? MxWidth: iWidth, iWidth); iWidth = Math. max (this. Min? This. minWidth: iWidth, iWidth, 0); return iWidth;}, // ratio height RepairScaleHeight: function (iWidth) {return Math. max (Math. round (iWidth + this. _ borderX)/this. ratio-this. _ borderY), 0) ;}, // ratio width RepairScaleWidth: function (iHeight) {return Math. max (Math. round (iHeight + this. _ borderY) * this. ratio-this. _ borderX), 0) ;}, // steering program // turn right TurnRight: function (fun) {if (! (This. min | this. _ styleWidth) {this. _ fun = fun; this. _ sideLeft = this. _ sideRight; this. max & this. _ mxSet (); return true ;}}, // turn left TurnLeft: function (fun) {if (! (This. min | this. _ styleWidth) {this. _ fun = fun; this. _ sideRight = this. _ sideLeft; this. _ fixLeft = this. _ styleLeft; this. max & this. _ mxSet (); return true ;}}, // turn to TurnUp: function (fun) {if (! (This. min | this. _ styleHeight) {this. _ fun = fun; this. _ sideDown = this. _ sideUp; this. _ fixTop = this. _ styleTop; this. max & this. _ mxSet (); return true ;}}, // returns TurnDown: function (fun) {if (! (This. min | this. _ styleHeight) {this. _ fun = fun; this. _ sideUp = this. _ sideDown; this. max & this. _ mxSet (); return true ;}}, // Stop scaling Stop: function () {removeEventHandler (document, "mousemove", this. _ fR); removeEventHandler (document, "mouseup", this. _ fS); if (isIE) {removeEventHandler (this. _ obj, "losecapture", this. _ fS); this. _ obj. releaseCapture ();} else {removeEventHandler (window, "blur", this. _ fS) ;}}}; script
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Script var rs = new Resize ("dragDiv", {Max: true, mxContainer: "bgDiv"}); rs. set ("rRightDown", "right-down"); rs. set ("rLeftDown", "left-down"); rs. set ("rRightUp", "right-up"); rs. set ("rLeftUp", "left-up"); rs. set ("rRight", "right"); rs. set ("rLeft", "left"); rs. set ("rUp", "up"); rs. set ("rDown", "down"); $ ("idScale "). onclick = function () {if (rs. scale) {this. value = "set ratio"; rs. scale = false;} else {this. value = "cancel ratio"; rs. ratio = 0; rs. scale = true ;}$ ("idMin "). onclick = function () {if (rs. min) {this. value = "set minimum range"; rs. min = false;} else {this. value = "minimum cancellation range"; rs. min = true;} script

I hope this article will help you design javascript programs.