Home > Developer > JavaScript
In this example, it is a very simple div drag. If you need it, you can add the corresponding code as needed. Welcome to shoot bricks
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html style = "height: 100%;">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> div width resize </title>
<! -- Reference jquery -->
<Script src = "http://code.jquery.com/jquery-1.8.0.min.js"
Type = "text/javascript"> </script>
<Script type = "text/javascript">
Function bindResize (el)
{
// Initialization parameters
Var els = document. getElementById ('menu '). style;
// Coordinates of the X and Y axes of the mouse
X = 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-$ ("# menu"). width ();
// 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 ';
}
// 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)
);
}
}
Var divResize = function (){
Var totalHeight = $ ("html"). height ();
Console. log (totalHeight );
Var topHeight = $ ("# top"). height ()
$ ("# Menu"). height (totalHeight-topHeight );
$ ("# Rightbar"). height (totalHeight-topHeight );
}
$ (Function (){
DivResize ();
$ (Window). resize (divResize );
BindResize (document. getElementById ('rightbar '));
});
</Script>
<Style type = "text/css">
. Content {
Width: 200px;
Background: # f1f1f1;
Text-align: center;
Border-color: # CCCCCC;
Border-style: solid;
Border-width: 0 1px;
}
</Style>
</Head>
<Body style = "padding: 0; margin: 0;">
<% --
<Table style = "Size: 100%">
<Tr>
<Td id = "menu" class = "content"> </td>
<Td id = "rightbar"
Style = "width: 2px; background: # cccccc; cursor: e-resize;"> </td>
</Tr>
</Table>
-- %>
<Div>
<Div id = "top" style = "width: 100%; height: 80px;"> </div>
<Div style = "float: left;" id = "menu" class = "content">
<Span> div to be dragged </span>
</Div>
<Div id = "rightbar"
Style = "width: 2px; background: # cccccc; cursor: e-resize; float: left;"> </div>
</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
