Home > Others

Draw a movable div with the mouse Based on jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I will not talk much about the specific principle. I will paste the Code directly.
Html code: Copy codeThe Code is as follows: <! 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>
<Title> Draw rectangle </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Script src = "jquery-1.6.2.min.js" type = "text/javascript"> </script>
<Script src = "jquery. ui. core. js" type = "text/javascript"> </script>
<Script src = "jquery. ui. widget. js" type = "text/javascript"> </script>
<Script src = "jquery. ui. mouse. js" type = "text/javascript"> </script>
<Script src = "jquery. ui. draggable. js" type = "text/javascript"> </script>
<Link href = "catch.css" rel = "stylesheet" type = "text/css"; charset = gb2312/>
<Script src = "catch. js" type = "text/javascript"; charset = gb2312> </script>
<! -- [If gte IE 7]>
<Style type = "text/css">
</Style>
<! [Endif] -->
</Head>
<Body>
<! -- Header -->
<Div id = "header">
<Label> Draw! </Label>
</Div>
<! -- Content -->
<Div id = "content">
</Div>
<! -- Bottom -->
<Div id = "bottom">
</Div>
</Body>
</Html>

Css code:Copy codeThe Code is as follows: body
{
Font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
Margin: 0px;
}
# Header
{
Width: 150px;
Margin: 0px auto;
}
# Header label
{
Font-size: 45px;
Font-weight: bolder;
}
# Content
{
Width: 90%;
Height: 600px;
Margin: 10px auto;
Border: 1px solid blue;
}
. New_rect
{
Opacity: 0.7;
-Moz-opacity: 0.7;
Filter: alpha (opacity = 70 );
-Ms-filter: alpha (opacity = 70 );
Background: # A8CAEC;
Border: 1px solid # 3399FF;
Position: fixed;
Float: left;
}
. New_rect: hover {
Cursor: move;
}
. Mousedown {
-Webkit-box-shadow: 5px 5px 5px black;
-Moz-box-shadow: 5px 5px 5px black;
Box-shadow: 5px 5px 5px black;
Z-index: 999;
}

Js Code:Copy codeThe Code is as follows: //////////////////////////////////////// //////////////////
$ (Function (){
// $ ("Div [title = new_rect]"). click (function () {alert ("click ");});
// $ (". New_rect"). draggable ();
Drow_rect ("# content ");
})
//////////////////////////////////////// /////////////////
Function drow_rect (the_id) {// theid indicates the layer Used as the canvas
Var num = 1;
Var x_down = 0, y_down = 0;
Var new_width = 0, new_height = 0;
Var x_original = 0, y_original = 0;
Var original_flag = true, down_flag = false;
Var x_point = 0, y_point = 0;
Var append_string;
Var MouseDown = function (e ){
Down_flag = true;
X_down = e. pageX;
Y_down = e. pageY; // record the current coordinate of the mouse
If (original_flag) {// if this is the first click, record the coordinates of the starting point to x_original and y_original.
X_original = e. pageX;
Y_original = e. pageY;
Original_flag = false;
}
};
Var MouseMove = function (e ){
If (down_flag) {// move the mouse
X_down = e. pageX;
Y_down = e. pageY;
X_point = x_original;
Y_point = y_original;
New_width = x_down-x_original;
If (new_width <0) {// move the cursor to the left
New_width =-new_width;
X_point = x_down;
}
New_height = y_down-y_original;
If (new_height <0) {// move the cursor to the right
New_height =-new_height;
Y_point = y_down;
}
$ ("Div [name = '" + num + "']"). remove (); // Delete the previous layer and generate a new layer in the subsequent Code
Append_string = "<div class = 'new _ rect' style = 'left:" + x_point + "px; top:" + y_point + "px;" + "width: "+ new_width +" px; height :"
+ New_height + "px 'name = '" + num + "'title ='" + num + "'> </div> ";
$ (The_id). append (append_string );
}
}
$ (The_id). bind ("mousedown", MouseDown );
$ (The_id). bind ("mousemove", MouseMove); // event binding
$ (The_id). mouseup (function (e) {// release the left mouse button to initialize the flag
Down_flag = false;
Original_flag = true;
$ ("Div [name = '" + num + "']"). draggable ();
$ ("Div [name = '" + num + "']"). mousedown (function (){
$ (This). addClass ("mousedown"); // Add a shadow
$ (The_id). unbind ("mousedown", MouseDown );
$ (The_id). unbind ("mousemove", MouseMove); // cancel event binding
});
$ ("Div [name = '" + num + "']"). mouseup (function (){
$ (This). removeClass ("mousedown"); // Delete the shadow
$ (The_id). bind ("mousedown", MouseDown );
$ (The_id). bind ("mousemove", MouseMove); // event binding
});
Num ++;
});
}

Upload an instance image:

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More