YUI 3: Drag & Drop (DD)

Getting Started

Include Dependencies

The easiest way to include the source files for and it 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 maybe required:

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

The YUI instance will automatically pull down 's source files, along with any dependent files missing from the page, when the dd module is used in your code. This helps you avoid having to manually manage the list of files which need to be included 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 Configurator (discussed below), can be used to determine the list of files you need to include in order to use .

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("", function(Y) { // 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, and populated the local YUI instance 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 the callback function inside which you can start writing your application code based on your own, custom instance of YUI.

NOTE: If you're not using the complete set of functionality the dd module delivers, you can lighten your page weight by specifying only the modules you need to the use method from the module list below.

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' }); });

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 });

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' }); });

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);

You can now do this:

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