f45a20d6ba9e8d695ec3ab707f0cc082999aa4a3Jakub Hrozek<div class="intro">

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek<p>This example is the same as the "Drag Delegation with Drop Target" example except we add some plugins.</p>

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek</div>

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek<div class="example">

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek {{>delegate-plugins-source}}

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek</div>

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek<h3>Adding Plugins to a Delegate instance</h3>

03532fb1cbb7e8c1d5cf2e93aa3719f926631cabStephen Gallagher<p>`DD.Delegate` provides a reference to the `dd` instance so you can plug into the underlying `dd` with `del.dd.plug()`.

8a2a49333b7df3a4b86db42cd20ec8286d2788d3Pavel BřezinaThis allows you to use DD plugins on a Delegate instance, as well as provides the ability to write plugins for Delegate itself.

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek</p>

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek

b69cb1787209e85cc246eb9a944242689bfe0c46Pavel Březina<h3>Constrain Plugin</h3>

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek<p>Here is how you would add the constrain plugin to a `DD.Delegate` instance.</p>

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek```

6f51c802311fd81a409a26763ed45b28a3234d0dJakub HrozekYUI().use('dd-delegate', 'dd-constrain', function(Y) {

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek var del = new Y.DD.Delegate({

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek container: '#demo',

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek nodes: 'li'

46e44f86067b7f77c3f71cb7ac57456434e354dcStephen Gallagher });

46e44f86067b7f77c3f71cb7ac57456434e354dcStephen Gallagher

6ea6ec5cb7d9985e2730fb9d4657624d10aed4d8Nick Guay del.dd.plug(Y.Plugin.DDConstrained, {

191e45ede8b9210d253dc041d5f0432d2ed2f4e3Jakub Hrozek constrain2node: '#play'

53b6d6e82dbe52aa655f910e87eb3595584aa9c9Jakub Hrozek });

46e44f86067b7f77c3f71cb7ac57456434e354dcStephen Gallagher});

46e44f86067b7f77c3f71cb7ac57456434e354dcStephen Gallagher```

1dab34228cefddcd6bedef2d2cee70a620c8ace8Jakub Hrozek

dc6dd1ef6a70a0a07017d362e13c7680e83c4fc8Pavel Březina<h3>DDProxy Plugin</h3>

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek<p>Here is how you would add the dd-proxy plugin to a `DD.Delegate` instance.</p>

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek```

a23919ed39d212f9f5694d9b103c84641fdb7680Stephen GallagherYUI().use('dd-delegate', 'dd-proxy', function(Y) {

6f51c802311fd81a409a26763ed45b28a3234d0dJakub Hrozek var del = new Y.DD.Delegate({

813086b16adabc6c1a0f37d7518c6a709ae1c57aJakub Hrozek container: '#demo',

46e44f86067b7f77c3f71cb7ac57456434e354dcStephen Gallagher nodes: 'li'

46e44f86067b7f77c3f71cb7ac57456434e354dcStephen Gallagher });

9b3f37cb0c70c7b18c49b657e3799094a8711cadJakub Hrozek

544525ee1fc54d744c08465066e2b4a521f78224Stephen Gallagher del.dd.plug(Y.Plugin.DDProxy, {

5ef295d1cf410ceaa92c03a7843df8a36409f465Stephen Gallagher moveOnEnd: false,

002dfe55ef258b73ca85eb813b1a156789b7702aJakub Hrozek cloneNode: true

b49d753b5a17c4092d8c24e84eea4400de39d341Sumit Bose });

ae0a5011e2644eaa482ea1b9e1451eff05c676b9Lukas Slebodnik

});

```

<h3>Full Example Source</h3>

<h4>HTML</h4>

```

{{>delegate-plugins-source-html}}

```

<h4>CSS</h4>

```

{{>delegate-plugins-source-css}}

```

<h4>Javascript</h4>

```

{{>delegate-plugins-source-js}}

```