Home > Developer > JavaScript
Recently, I want to learn Javascript and Rapha ë l to implement a drag-and-drop rectangle. In addition, labels must be displayed on the rectangle. I checked this online. Javascript has only been learned for a few days, and the code is estimated to be poorly written.
Copy codeThe Code is as follows:
<! Doctype html>
<Html charset = "UTF-8">
<Head>
<Title> Rapha ë l-Connectivities </title>
<Script src = "raphael-min.js" type = "text/javascript" charset = "UTF-8"> </script>
<Script type = "text/javascript">
Function Entity (r, l, t, w, h ){
This. Label = r. text (l + w/2, t + h/2, "Hello World! ");
This. rectangle = r. rect (l, t, w, h, 10 ). attr ({fill: "brown", stroke: "#666", title: "A Rectangle "}). drag (move, Dragger, up ). data ("cooperative", this. label ). toBack ();
Function Dragger (){
This. xx = this. attr ("x ");
This. yy = this. attr ("y ");
This. animate ({"fill-opacity":. 2}, 500 );
}
Function move (dx, dy ){
Var attr = {x: this. xx + dx, y: this. yy + dy };
This. attr (attr );
Var lb = this. data ("cooperative ");
Var attr1 = {x: this. xx + dx + this. attr ("width")/2, y: this. yy + dy + this. attr ("height")/2 };
Lb. attr (attr1 );
}
Function up (){
This. animate ({"fill-opacity": 1}, 300 );
}
}
Window. onload = function (){
Var r = Raphael ("holder", 620,420), discattr = {fill: "red", stroke: "none "};
Var entity1 = new Entity (r, 0, 0, 60, 40 );
};
</Script>
</Head>
<Body>
<Div id = "holder">
</Div>
</Body>
</Html>
The implementation method is to use Text as the Rectangle custom attribute to control the moving along with the Rectangle when dragging.
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
