The principle of "element drag and drop to change the size" is actually 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.
After jquery. JS is introduced:
< Script Type = " Text/JavaScript " >
$ ( Function (){
// Bind the element object to be dragged to change the size
Bindresize (document. getelementbyid ( ' Test ' ))
});
Function Bindresize (EL ){
// Initialization parameters
VaR Els = El. style,
// Coordinates of the X and Y axes of the mouse
X = Y = 0 ;
// Evil index finger
$ (EL). mousedown ( Function (E ){
// After the element is pressed, the coordinates of the current mouse and the object are calculated.
X = E. clientx - El. offsetwidth,
Y = E. clienty - El. offsetheight;
// Do something in support of setcapture
El. setcapture ? (
// Capture focus
El. setcapture (),
// Set events
El. onmousemove = Function (EV ){
Mousemove (EV | Event)
},
El. onmouseup = Mouseup
):(
// Bind event
$ (Document). BIND ( " Mousemove " , Mousemove). BIND ( " Mouseup " , Mouseup)
)
// Prevent default events
E. preventdefault ()
});
// Mobile event
Function Mousemove (e ){
// Super invincible universe computing...
Els. Width = E. clientx - X + ' Px ' ,
Els. Height = E. clienty - Y + ' Px '
}
// Stop event
Function Mouseup (){
// Do some things in support of releasecapture
El. releasecapture ? (
// Release focus
El. releasecapture (),
// Remove event
El. onmousemove = El. onmouseup = Null
):(
// Uninstall event
$ (Document). Unbind ( " Mousemove " , Mousemove). Unbind ( " Mouseup " , Mouseup)
)
}
}
< / SCRIPT>
Negative values are not allowed in width and height. Otherwise, an error is reported. Based on this requirement, a small instance of "minimum height and width limit" is simply extended:
< Script Type = " Text/JavaScript " >
$ ( Function (){
// Bind the element object to be dragged to change the size
Bindresize (document. getelementbyid ( ' Test ' ), 200 , 100 );
});
// Bind the element object to be dragged to change the size
// EL Element Object
// Min width
// Minh minimum height
Function Bindresize (El, minw, Minh ){
// Initialization parameters
VaR Els = El. style,
// Coordinates of the X and Y axes of the mouse
X = Y = XM = Ym = 0 ;
// Evil index finger
$ (EL). mousedown ( Function (E ){
// After the element is pressed, the coordinates of the current mouse and the object are calculated.
X = E. clientx - El. offsetwidth,
Y = E. clienty - El. offsetheight;
// Do something in support of setcapture
El. setcapture ? (
// Capture focus
El. setcapture (),
// Set events
El. onmousemove = Function (EV ){
Mousemove (EV | Event)
},
El. onmouseup = Mouseup
):(
// Bind event
$ (Document). BIND ( " Mousemove " , Mousemove). BIND ( " Mouseup " , Mouseup)
)
// Prevent default events
E. preventdefault ()
});
// Mobile event
Function Mousemove (e ){
// Super invincible universe computing...
XM = E. clientx - X,
Ym = E. clienty - Y;
// Restricted height and width
XM <= Minw && (XM = Minw ),
Ym <= Minh && (Ym = Minh );
// SET SIZE
Els. Width = XM + ' Px ' ,
Els. Height = Ym + ' Px '
}
// Stop event
Function Mouseup (){
// Do some things in support of releasecapture
El. releasecapture ? (
// Release focus
El. releasecapture (),
// Remove event
El. onmousemove = El. onmouseup = Null
):(
// Uninstall event
$ (Document). Unbind ( " Mousemove " , Mousemove). Unbind ( " Mouseup " , Mouseup)
)
}
}
< / SCRIPT>
Download: instance prototype
Copyright:
This article was originally published in the blog Park, the author is Xiao Wu, blog http://wuxinxi007.cnblogs.com/
The copyright of this article is shared by the author and the blog. You are welcome to repost this article, but you must keep this statement without the author's consent andArticleThe original text connection is clearly displayed on the page. Otherwise, the connection is deemed as infringement.
