jquery Plugin jquery.dragscale.js Implement drag and drop changes in the size of elements (with demo source download) _jquery

The example of this article tells the jquery plugin jquery.dragscale.js implement drag and drop to change the size of the element. Share to everyone for your reference, specific as follows:

The plug-in is written by the author of the article, the purpose is to promote the author's JS ability, but also to some JS rookie in the use of plug-ins to provide some convenience, the veteran on the leisurely fly it.

This plug-in is designed to achieve the current more popular drag-and-drop changes in the size of the effect, you can set your own actual requirements to be dragged elements of the minimum width and maximum width and height. 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 ">  

Plug-in jquery.dragscale.js code:

/* *resizable 0.1 *dependenc jquery-1.7.1.js/*;(function (a) {a.fn.resizable = function (options) {var defaults = { Default parameters minw:150, minh:150, maxw:500, maxh:500,} var opts = A.extend (defaults,
    Options);
      This.each (function () {var obj = a (this); Obj.mousedown (function (e) {var e = e | | event;//differentiate IE and other browser event objects var x = E.pagex-obj.position (). Left; Take the distance from the left side of the parent element of the matching element var y = e.pagey-obj.position (). Top;
          Gets the distance of the mouse from the top of the parent element of the matching element $ (document). MouseMove (function (e) {var e = e | | event; var _x = e.pagex-x;
          Dynamically get the matching element from the width of the left side 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 remove the move event match elements with wide-height change stop});
      });

 }}) (JQuery);

Full instance code click here to download the site.

More about jquery-related content readers can view the site topics: "jquery drag-and-drop effects and tips summary", "JQuery Extended Skills Summary", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary", "jquery Selector usage Summary "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.