JQuery drag and drop to change the element size

In fact, the principle of "element drag and drop to change the size" is different from that of "element drag". It is mainly used for top, left, width, and height, relatively easy to implement. The following is a source code prototype. After you understand the principle and expand other practical applications, the idea is much simpler and clearer. Let's take a look at the effect:

Show me the results ~ By www.bkjia.com

Below is the JavaScript Code

<Script type = "text/javascript">/** jQuery. resize by wuxinxi007 * Date: 2011-5-14 */$ (function () {// bind the bindResize (document. getElementById ('test');}); function bindResize (el) {// initialization parameter var els = el. style, // X and Y axis coordinates of the mouse x = y = 0; // evil index finger $ (el ). mousedown (function (e) {// After the element is pressed, the coordinates x = e after the current mouse and object are calculated. clientX-el. offsetWidth, y = e. clientY-el. offsetHeight; // supports setCapture to do something else. setCapture? (// Capture focus el. setCapture (), // set the event el. onmousemove = function (ev) {mouseMove (ev | event)}, el. onmouseup = mouseUp): (// bind event $ (document ). bind ("mousemove", mouseMove ). bind ("mouseup", mouseUp) // prevents default events from occurring e. preventDefault ()}); // move event function mouseMove (e) {// Super invincible universe computing... els. width = e. clientX-x + 'px ', els. height = e. clientY-y + 'px '} // stop the event function mouseUp () {// do something like el in support of releaseCapture. releaseCapture? (// Release focus el. releaseCapture (), // remove event el. onmousemove = el. onmouseup = null): (// unload event $ (document ). unbind ("mousemove", mouseMove ). unbind ("mouseup", mouseUp) }}</script>