5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="intro">
aed0a1e5e3f44c4b7d2afd9e1c7dc78203e11251Dav Glass<p>This example is the same as the "Drag Delegation with Drop Target" example except we add some plugins.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass</div>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="example">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass {{>delegate-plugins-source}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass</div>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Adding Plugins to a Delegate instance</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>`DD.Delegate` provides a reference to the `dd` instance so you can plug into the underlying `dd` with `del.dd.plug()`.
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassThis allows you to use DD plugins on a Delegate instance, as well as provides the ability to write plugins for Delegate itself.
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Constrain Plugin</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Here is how you would add the constrain plugin to a `DD.Delegate` instance.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-delegate', 'dd-constrain', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var del = new Y.DD.Delegate({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass container: '#demo',
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass nodes: 'li'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass });
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass del.dd.plug(Y.Plugin.DDConstrained, {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass constrain2node: '#play'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass });
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass});
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>DDProxy Plugin</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Here is how you would add the dd-proxy plugin to a `DD.Delegate` instance.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-delegate', 'dd-proxy', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var del = new Y.DD.Delegate({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass container: '#demo',
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass nodes: 'li'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass });
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass del.dd.plug(Y.Plugin.DDProxy, {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass moveOnEnd: false,
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass cloneNode: true
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass });
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass});
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Full Example Source</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4>HTML</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>delegate-plugins-source-html}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4>CSS</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>delegate-plugins-source-css}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4>Javascript</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>delegate-plugins-source-js}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```