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.
<div id="mygraphiccontainer"></div>
#mygraphiccontainer {
position: relative;
width: 700px;
height:200px;
}
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
});
<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>