Home > Developer > Web Develop
Jquery: drag the mouse to change the div size. jquery: drag the div size.
A very simple example:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jQuery "Drag and Drop elements to change the size" prototype </title>
<Script type = "text/javascript" src = ".../js/jquery-1.7.1.js"> </script>
<Script type = "text/javascript">
/*
* JQuery. Resize by wuxinxi007
* Date: 2011-5-14
* Blog: http://wuxinxi007.cnblogs.com/
*/
$ (Function (){
// Bind the element object whose size needs to be dragged and changed
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, calculate the coordinates of the current mouse and the object after calculation.
X = e. clientX-el. offsetWidth,
Y = e. clientY-el. offsetHeight;
// Perform some operations on setCapture.
El. setCapture? (
// Capture focus
El. setCapture (),
// Set the event
El. onmousemove = function (ev ){
MouseMove (ev | event)
},
El. onmouseup = mouseUp
):(
// Bind events
$ (Document). bind ("mousemove", mouseMove). bind ("mouseup", mouseUp)
)
// Prevent default events
E. preventDefault ()
});
// Move the 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 in support of releaseCapture
El. releaseCapture? (
// Release focus
El. releaseCapture (),
// Remove the event
El. onmousemove = el. onmouseup = null
):(
// Uninstall the event
$ (Document). unbind ("mousemove", mouseMove). unbind ("mouseup", mouseUp)
)
}
}
</Script>
<Style type = "text/css">
# Test {
Position: absolute;
Top: 0; left: 0;
Width: 200px;
Height: 100px;
Background: # f1f1f1;
Text-align: center;
Line-height: 100px;
Border: 1px solid # CCC;
Cursor: move;
}
</Style>
</Head>
<Body>
<Div id = "test"> dgdg </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
