5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<style scoped>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#custom-doc { width: 95%; min-width: 950px; }

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#pagetitle {background-image: url(../../assets/bg_hd.gif);}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 700px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:200px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</style>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="intro">

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>

d676c69348c891c2a261a6dbd4f450ddb2e312f3TrippThis 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

d676c69348c891c2a261a6dbd4f450ddb2e312f3Trippunderlying Dom elements. This is true when using Drag as well. When creating a Drag, assign the Shape instance to the Drag's `node` attribute.

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippa shape.

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="example">

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-drag-source}}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp</div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>HTML</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div id="mygraphiccontainer"></div>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>CSS</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 700px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:200px;

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Javascript</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Create a `Graphic` instance.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippvar mygraphic = new Y.Graphic({render: "#mygraphiccontainer"});

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp<p>Create a `Rect` instance with the `addShape` method.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var myrect = mygraphic.addShape({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "rect",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp stroke: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color:"#000",

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp weight: 1

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp fill: {

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#fc0"

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp },

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width:40,

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:50

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Create a drag instance for the shape.</p>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp var mydrag = new Y.DD.Drag({

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp node: myrect

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp });

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Complete Example Source</h2>

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-drag-source}}

5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp```