Jquery plug-in jquery. dragscale. js implements the drag and drop method to change the element size (with demo source code download), jquery drag and drop drag

Jquery plug-in jquery. dragscale. js implements the drag and drop method to change the element size (with demo source code download), jquery drag and drop drag

This document describes how to drag and drop jquery. dragscale. js to change the element size. We will share this with you for your reference. The details are as follows:

This plug-in is written by the author of the article to improve the author's js capabilities. It also provides some convenience for some js cainiao to use the plug-in. Let's fly over it.

This plug-in is designed to achieve the effect of changing the size of elements by drag and drop. You can set the minimum width and maximum width of the elements to be dragged based on your actual needs. The overall code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Jquery. dragscale. js code:
/** Resizable 0.1 * Dependenc jquery-1.7.1.js */; (function (a) {. fn. resizable = function (options) {var defaults = {// default parameter minW: 150, minH: 150, maxW: 500, maxH: 500,} var opts =. extend (defaults, options); this. each (function () {var obj = a (this); obj. mousedown (function (e) {var e = e | event; // differentiate IE from other browser event objects var x = e. pageX-obj. position (). left; // obtain the distance from the left of the parent element of the matching element. var y = e. pageY-obj. posi Tion (). top; // get the distance between the mouse and the top of the parent element of the matching element $ (document ). mousemove (function (e) {var e = e | event; var _ x = e. pageX-x; // Dynamically Retrieve the width of the matching element from the left of its parent element var _ y = e. pageY-y; _ x = _ x <opts. minW? Opts. minW: _ x; // ensure that the minimum width of the matching element is 150px _ x = _ x> opts. maxW? Opts. maxW: _ x; // ensure that the maximum width of the matching element is 500px _ y = _ y <opts. minH? Opts. minH: _ y; _ y = _ y> opts. maxH? Opts. maxH: _ y; obj.parent().css ({width: _ x, height: _ y });}). mouseup (function () {$ (this ). unbind ("mousemove"); // when the mouse is lifted to delete the movement event, the matching element width and height change is stopped.}) ;}}) (jQuery );
Click here to download the complete instance code.