+
+
+This example shows how to drag a Shape instance. When using DD-Drag, you normally assign an HTMLElement to the Drag's node attribute. Since Shape instances act as a normalization layer across browsers, you never directly interact with their
+underlying Dom elements. This is true when using Drag as well. When creating a Drag, assign the Shape instance to the Drag's node attribute.
+a shape.
+
+
+
+
+
+
+HTML
+<div id="mygraphiccontainer"></div>+ + +
CSS
+#mygraphiccontainer {
+ position: relative;
+ width: 700px;
+ height:200px;
+}
+
+
+Javascript
+ +Create a Graphic instance.
var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"});
+
+
+Create a Rect instance with the addShape method.
var myrect = mygraphic.addShape({
+ type: "rect",
+ stroke: {
+ color:"#000",
+ weight: 1
+ },
+ fill: {
+ color: "#fc0"
+ },
+ width:40,
+ height:50
+});
+
+
+Create a drag instance for the shape.
+ +var mydrag = new Y.DD.Drag({
+ node: myrect
+});
+
+
+Complete Example Source
+ +<div id="mygraphiccontainer"></div>
+<script>
+ YUI().use('graphics', 'dd-drag', function (Y)
+ {
+ var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"});
+ var myrect = mygraphic.addShape({
+ type: "rect",
+ stroke: {
+ color:"#000",
+ weight: 1
+ },
+ fill: {
+ color: "#fc0"
+ },
+ width:40,
+ height:50
+ });
+
+ var mydrag = new Y.DD.Drag({
+ node: myrect
+ });
+ });
+</script>
+
+