Example: Basic drag with graphic object

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>

Examples

Examples That Use This Component