YUI 3: Drag & Drop (DD)

Getting Started

Include Dependencies

The easiest way to include the source files for Drag & Drop and its dependencies is to add the YUI seed file to your page, using the following script tag, and allow the YUI instance to download any additional files which may be required:

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

The YUI instance will automatically pull down Drag & Drop's source files and any missing dependencies when the dd module is used. This helps you avoid having to manually manage the list of files needed on your page to support multiple components while also optimizing your initial page weight by loading files only when they are required.

If you do want to include file dependencies manually on your page, the YUI Dependency Configurator can be used to determine the list of files you need to include in order to use Drag & Drop.

The YUI Instance

Once you have the YUI seed file on your page (yui-min.js), you can create a new YUI instance for your application to use and populate it with the modules you need, specified as the first set of arguments to the use method:

// Create new YUI instance, and populate it with the required modules
YUI().use('dd', function(Y) {
 
    // Drag & Drop available, and ready for use.
 
});

// Create new YUI instance, and populate it with the required modules
YUI().use('dd', function(Y) {
 
    // Drag & Drop available, and ready for use.
 
});

The last argument passed to use is a callback function. The callback function will be invoked as soon as the YUI instance is done downloading any required files missing from your page. Once those files are loaded, your local YUI instance will be supplemented with the classes which make up the dd module and any modules it depends on. A reference to the populated YUI instance (Y) is passed back to your callback function. Within your callback, then, you can start writing your application code based on your own custom instance of YUI.

For more information on creating instances of YUI and the use method, see the YUI Global object documentation.

Using the Drag & Drop Utility

This section describes how to use the Drag & Drop Utility in further detail. It contains these subsections:

• Module Descriptions
• Simple Drag & Drop
• Events
• Event Bubbling
• CSS Class Names

Module Descriptions

Drag & Drop for YUI 3.0 has been broken up into several modules to allow you, as the implementer, to pick how you want it to work and what code you need on your page.

Simple Drag & Drop

Basic Drag

You create a simple Drag instance by including the dd-drag module and using the following code:

var Y = new YUI().use('dd-drag', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#drag'
    });
});

var Y = new YUI().use('dd-drag', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#drag'
    });
});

Basic Proxy Drag

You create a simple Proxy Drag instance by including the dd-drag and dd-proxy modules and using the following code:

var Y = new YUI().use('dd-drag', 'dd-proxy', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#drag'
    }).plug(Y.Plugin.DDProxy); //This config option makes the node a Proxy Drag
});

var Y = new YUI().use('dd-drag', 'dd-proxy', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#drag'
    }).plug(Y.Plugin.DDProxy); //This config option makes the node a Proxy Drag
});

Basic Drop Target

You create a simple Drop Target instance by including the dd-drop module and using the following code:

var Y = new YUI().use('dd-drop', function(Y) {
    var drop = new Y.DD.Drop({
        node: '#drop'
    });
});

var Y = new YUI().use('dd-drop', function(Y) {
    var drop = new Y.DD.Drop({
        node: '#drop'
    });
});

Events

Drag & Drop for YUI 3.0 has been been packed with useful events to allow the implementer to control the end user experience.

Event Bubbling

To allow for a truly Event driven application, all Drag & Drop related events are bubbled to the DragDropMgr.

Per YUI instance, you can listen for all Drag & Drop events from a central location.

So instead of doing this:

var doSomething = function() {
    Y.log('Do Something Here');
};
dd1.on('drag:drag', doSomething);
dd2.on('drag:drag', doSomething);
dd3.on('drag:drag', doSomething);
dd4.on('drag:drag', doSomething);
dd5.on('drag:drag', doSomething);
dd6.on('drag:drag', doSomething);
dd7.on('drag:drag', doSomething);
dd8.on('drag:drag', doSomething);
dd9.on('drag:drag', doSomething);

var doSomething = function() {
    Y.log('Do Something Here');
};
dd1.on('drag:drag', doSomething);
dd2.on('drag:drag', doSomething);
dd3.on('drag:drag', doSomething);
dd4.on('drag:drag', doSomething);
dd5.on('drag:drag', doSomething);
dd6.on('drag:drag', doSomething);
dd7.on('drag:drag', doSomething);
dd8.on('drag:drag', doSomething);
dd9.on('drag:drag', doSomething);

You can now do this:

var doSomething = function() {
    Y.log('Do Something Here');
};
Y.DD.DDM.on('drag:drag', doSomething);

var doSomething = function() {
    Y.log('Do Something Here');
};
Y.DD.DDM.on('drag:drag', doSomething);

CSS Class Names

The Drag & Drop Utility adds CSS class names for important moments in the drag and drop operation. Below you will find the list of these class names.

The Drag & Drop Utility doesn't ship with a default skin, so no style rules are attached to these class names. That is completely left up to the implementer.

Support & Community