index.mustache revision 046ea4d1ee0f22d956cd360e1e0c0b275aa4bbd0
5432N/A <p> The Drag and Drop Utility allows you to create a draggable interface efficiently, buffering you from browser-level abnormalities and enabling you to focus on the interesting logic surrounding your particular implementation. This component enables you to create a variety of standard draggable objects with just a few lines of code and then, using its extensive API, add your own specific implementation logic. </p>
5432N/A <p>For more information about drag and drop as a design pattern, see the <a href="http://developer.yahoo.com/ypatterns/parent_dragdrop.php">Yahoo! Design Pattern Library</a>.</p>
5432N/A<p>You create a simple Drag instance by including the `dd-drag` module and using the following code:</p>
5432N/A<p>You create a simple Proxy Drag instance by including the `dd-drag` and `dd-proxy` modules and using the following code:</p>
5432N/A }).plug(Y.Plugin.DDProxy); //This config option makes the node a Proxy Drag
5432N/A<p>You create a simple Drop Target instance by including the `dd-drop` module and using the following code:</p>
5432N/A<p>Drag and Drop for YUI 3 has been been packed with useful events to allow the implementer to control the end user experience.</p>
5432N/A <td>Handles the mousedown/touchstart DOM event, checks to see if you have a valid handle then starts the drag timers.</td>
5432N/A <td>Fires after the mousedown/touchstart event has been cleared.</td>
5432N/A <td>Fires every mousemove/touchmove during a drag operation.</td>
5432N/A <td>Fires when this node is dropped on an invalid Drop Target. (Fired from dd-ddm-drop)</td>
5432N/A <td>Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)</td>
5432N/A<p>To allow for a truly Event driven application, all Drag and Drop related events are bubbled to the `DragDropMgr`.</p>
5432N/A<p>This allows you to listen for all Drag and Drop events from a central location, per YUI instance.</p>
5432N/A<p>This approach is also handy for situations where you are dynamically adding and removing items.</p>
Y.log('Do Something Here');
Y.DD.DDM.on('drag:drag', doSomething);
<p>Delegate dragging allows you to create a "list/group" of draggable items that are under a common "container". Using this approach, you can have hundreds of draggable items, yet only have one object created under the hood.</p>
<p>This approach is also handy for situations where you are dynamically adding and removing items from the "list" and need to make them draggable. Using `Delegate` you wouldn't have to create a new `drag` instance when adding or removing it.</p>
var del = new Y.DD.Delegate({
<p><strong>Note:</strong> `DD.Delegate` does not auto find your drop target items, if you change the `nodes` under the hood (add or remove) you need to call `delegate.syncTargets();` to manage them.</p>
<p>The Drag and 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.</p>
<p>The Drag and 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.</p>
<p><strong>Note: </strong> As of version 3.1.0, Drag and Drop changed it's classname prefix from `yui-dd` to `yui3-dd` to mimic the global change in skinning.</p>
<h2 id="gestures">Touch/Gesture Support</h2>
<p>Native gesture support was added to DD in 3.2.0. This support is transparent and the implementor should not have to do anything to use this functionality. When `dd` is used, loader will check the device to see if it contains support for Gesture Events, if the device supports these events the `dd-gestures` module will automatically be loaded as well as it's dependencies. At this point, DD will operate as usual but it will utilize the native gesture events instead of mouse based events.</p>
<p>Drag and Drop for YUI 3 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.</p>
<td>Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.</td>
<td>Adds shim support, only needed when you need to drag over something that steals mouse events or you are targeting.</td>
<p><strong>In 3.2.0, some modules have been removed from the rollup and were converted to DD Plugins.</strong> Below are the list of plugins that are no longer in the `dd` rollup.</p>