+
+
+This example is the same as the "Drag Delegation with Drop Target" example except we add some plugins.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- Item #1 +
- Item #2 +
- Item #3 +
- Item #4 +
- Item #5 +
- Item #6 +
- Item #7 +
- Item #8 +
- Item #9 +
- Item #10 +
Drop on me
+Adding Plugins to a Delegate instance
+DD.Delegate provides a reference to the dd instance so you can plug into the underlying dd with del.dd.plug().
+This allows you to use DD plugins on a Delegate instance, as well as provides the ability to write plugins for Delegate itself.
+
Constrain Plugin
+Here is how you would add the constrain plugin to a DD.Delegate instance.
YUI().use('dd-delegate', 'dd-constrain', function(Y) {
+ var del = new Y.DD.Delegate({
+ container: '#demo',
+ nodes: 'li'
+ });
+
+ del.dd.plug(Y.Plugin.DDConstrained, {
+ constrain2node: '#play'
+ });
+});
+
+
+DDProxy Plugin
+Here is how you would add the dd-proxy plugin to a DD.Delegate instance.
YUI().use('dd-delegate', 'dd-proxy', function(Y) {
+ var del = new Y.DD.Delegate({
+ container: '#demo',
+ nodes: 'li'
+ });
+
+ del.dd.plug(Y.Plugin.DDProxy, {
+ moveOnEnd: false,
+ cloneNode: true
+ });
+
+});
+
+
+Full Example Source
+ +HTML
+<div id="play"> + + <div id="demo"> + <ul> + <li>Item #1</li> + <li>Item #2</li> + <li>Item #3</li> + <li>Item #4</li> + <li>Item #5</li> + <li>Item #6</li> + <li>Item #7</li> + <li>Item #8</li> + <li>Item #9</li> + <li>Item #10</li> + </ul> + </div> + + <div id="drop">Drop on me</div> +</div>+ +
CSS
+#demo {
+}
+#demo ul li {
+ border: 1px solid black;
+ background-color: #8DD5E7;
+ cursor: move;
+ margin: 3px;
+ list-style-type: none;
+ z-index: 2;
+ width: 200px;
+ height: 20px;
+ padding: 2px;
+ zoom: 1;
+}
+#play {
+ border: 1px solid black;
+ zoom: 1;
+ padding: 2em;
+}
+#drop {
+ border: 1px solid black;
+ background-color: #eee;
+ height: 50px;
+ width: 200px;
+ float: right;
+ bottom: 50px;
+ position: relative;
+}
+#drop strong {
+ font-weight: bold;
+}
+#drop.yui3-dd-drop-over {
+ background-color: #ccc;
+}
+#example-canvas {
+ position: static;
+}
+
+Javascript
+YUI().use('dd-delegate', 'dd-drop-plugin', 'dd-constrain', 'dd-proxy', function(Y) {
+ var del = new Y.DD.Delegate({
+ container: '#demo',
+ nodes: 'li'
+ });
+
+ del.on('drag:start', function(e) {
+ e.target.get('node').setStyle('opacity', '.5');
+ });
+ del.on('drag:end', function(e) {
+ e.target.get('node').setStyle('opacity', '1');
+ });
+
+ del.dd.plug(Y.Plugin.DDConstrained, {
+ constrain2node: '#play'
+ });
+
+ del.dd.plug(Y.Plugin.DDProxy, {
+ moveOnEnd: false,
+ cloneNode: true
+ });
+
+ var drop = Y.one('#drop').plug(Y.Plugin.Drop);
+ drop.drop.on('drop:hit', function(e) {
+ drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
+ });
+
+
+});
+
+