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.

{{>graphics-drag-source}}

HTML

```
```

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

``` {{>graphics-drag-source}} ```