#

# 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>