YUI 3.x Home -

YUI Library Examples: Drag & Drop: Using Drag plugins with Delegate

Drag & Drop: Using Drag plugins with Delegate

This example is the same as the Drag Delegation with Drop Target example except we add some plugins.

View example in new window.

  • 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.

  1. YUI().use('dd-delegate', 'dd-constrain', function(Y) {
  2.     var del = new Y.DD.Delegate({
  3.         cont: '#demo',
  4.         nodes: 'li'
  5.     });
  6.  
  7.     del.dd.plug(Y.Plugin.DDConstrained, {
  8.         constrain2node: '#play'
  9.     });
  10. });
YUI().use('dd-delegate', 'dd-constrain', function(Y) {
    var del = new Y.DD.Delegate({
        cont: '#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.

  1. YUI().use('dd-delegate', 'dd-proxy', function(Y) {
  2.     var del = new Y.DD.Delegate({
  3.         cont: '#demo',
  4.         nodes: 'li'
  5.     });
  6.  
  7.     del.dd.plug(Y.Plugin.DDProxy, {
  8.         moveOnEnd: false,
  9.         cloneNode: true
  10.     });
  11.  
  12. });
YUI().use('dd-delegate', 'dd-proxy', function(Y) {
    var del = new Y.DD.Delegate({
        cont: '#demo',
        nodes: 'li'
    });
 
    del.dd.plug(Y.Plugin.DDProxy, {
        moveOnEnd: false,
        cloneNode: true
    });
 
});

Full Example Source

  1. YUI().use('dd-delegate', 'dd-drop-plugin', 'dd-constrain', 'dd-proxy', function(Y) {
  2.  
  3.     var del = new Y.DD.Delegate({
  4.         cont: '#demo',
  5.         nodes: 'li'
  6.     });
  7.  
  8.     del.on('drag:start', function(e) {
  9.         e.target.get('node').setStyle('opacity', '.5');
  10.     });
  11.     del.on('drag:end', function(e) {
  12.         e.target.get('node').setStyle('opacity', '1');
  13.     });
  14.  
  15.     del.dd.plug(Y.Plugin.DDConstrained, {
  16.         constrain2node: '#play'
  17.     });
  18.  
  19.     del.dd.plug(Y.Plugin.DDProxy, {
  20.         moveOnEnd: false,
  21.         cloneNode: true
  22.     });
  23.  
  24.     var drop = Y.one('#drop').plug(Y.Plugin.Drop);
  25.     drop.drop.on('drop:hit', function(e) {
  26.         drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
  27.     });
  28.  
  29. });
YUI().use('dd-delegate', 'dd-drop-plugin', 'dd-constrain', 'dd-proxy', function(Y) {
 
    var del = new Y.DD.Delegate({
        cont: '#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>');
    });
 
});

More Drag & Drop Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings