index.mustache revision 5c5f5643ee2dfbf7de92a5beb9d3de882cebdbf9
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="intro">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>getting-started}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h2>Using Drag and Drop</h2>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4>Basic Drag</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>You create a simple Drag instance by including the `dd-drag` module and using the following code:</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-drag', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var dd = new Y.DD.Drag({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#drag'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4>Basic Proxy Drag</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>You create a simple Proxy Drag instance by including the `dd-drag` and `dd-proxy` modules and using the following code:</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-drag', 'dd-proxy', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var dd = new Y.DD.Drag({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#drag'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass }).plug(Y.Plugin.DDProxy); //This config option makes the node a Proxy Drag
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4>Basic Drop Target</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>You create a simple Drop Target instance by including the `dd-drop` module and using the following code:</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-drop', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var drop = new Y.DD.Drop({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass node: '#drop'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4 id="events">Events</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p><em>* All Drag and Drop events bubble, by default, to the Drag and Drop Manager.</em></p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Event</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Target</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Preventable</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Stoppable</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Description</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:mouseDown`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Handles the mousedown/touchstart DOM event, checks to see if you have a valid handle then starts the drag timers.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:afterMouseDown`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires after the mousedown/touchstart event has been cleared.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:mouseup`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires the mouseup event.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:align`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when this node is aligned.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:removeHandle`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires after a handle is removed.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:addHandle`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires after a handle is added.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:removeInvalid`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires after an invalid selector is removed.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:addInvalid`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires after an invalid selector is added.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:start`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires at the start of a drag operation.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:end`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires at the end of a drag operation.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:drag`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>yes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires every mousemove/touchmove during a drag operation.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:over`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when this node is over a Drop Target. (Fired from dd-drop)</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:enter`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when this node enters a Drop Target. (Fired from dd-drop)</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:exit`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when this node exits a Drop Target. (Fired from dd-drop)</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:drophit`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when this node is dropped on a valid Drop Target. (Fired from dd-ddm-drop)</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drag:dropmiss`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when this node is dropped on an invalid Drop Target. (Fired from dd-ddm-drop)</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drop:over`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when a drag element is over this target.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drop:enter`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when a drag element enters this target.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drop:exit`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when a drag element exits this target.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>`drop:hit`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4 id="bubbling">Event Bubbling</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>To allow for a truly Event driven application, all Drag and Drop related events are bubbled to the `DragDropMgr`.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>This allows you to listen for all Drag and Drop events from a central location, per YUI instance.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>This approach is also handy for situations where you are dynamically adding and removing items.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>So instead of doing this:</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassvar doSomething = function() {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass Y.log('Do Something Here');
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdd1.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdd2.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdd3.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdd4.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdd5.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdd6.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdd7.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdd8.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdd9.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>You can now do this:</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassvar doSomething = function() {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass Y.log('Do Something Here');
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassY.DD.DDM.on('drag:drag', doSomething);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4 id="delegate">Delegate Dragging</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-delegate', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var del = new Y.DD.Delegate({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass container: '#demo', //The common container
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass nodes: '.item' //The items to make draggable
5c5f5643ee2dfbf7de92a5beb9d3de882cebdbf9Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4 id="cssclasses">CSS Class Names</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Class Name</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Target</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>State</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`yui3-dd-draggable`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Given to all Drag Nodes</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`yui3-dd-locked`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Added when a Drag instance is locked</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`yui3-dd-dragging`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Added while a Drag instance is active</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`yui3-dd-proxy`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Proxy</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Given to the Proxy Node</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`yui3-dd-drop`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Given to all Drop Targets</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`yui3-dd-drop-locked`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Added when a Drop instance is locked</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`yui3-dd-drop-active-valid`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Added to a Drop when it is an valid target for the current drag operation</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`yui3-dd-drop-active-invalid`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Added to a Drop when it is an invalid target for the current drag operation</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`yui3-dd-drop-over`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Added when a Drag instance is over this Drop Target</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h4 id="gestures">Touch/Gesture Support</h4>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3 id="modules">Module Descriptions</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Module Name</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Description</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-drag`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Main drag class, this makes something draggable.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-proxy`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Adds proxy support to the main drag class.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-constrain`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Adds constrain support to the main drag class.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-scroll`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Adds node and window based scroll support.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-delegate`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-drop`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Drop Support, this is the support for all drop targets.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>All of the Drag and Drop modules rolled up into one file.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th colspan="2">Other Included Modules</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-ddm-base`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Base DragDrop Manager, required to make something draggable.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-ddm`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Adds shim support, only needed when you need to drag over something that steals mouse events or you are targeting.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-ddm-drop`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Adds Drop support, only required when you have drop targets you need to interact with.</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3 id="plugins">DD Plugins</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Plugin</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <th>Description</th>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-plugin`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Node plugin for Drag</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-drop-plugin`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Node plugin for Drop</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td nowrap="nowrap">`dd-gestures`</td>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <td>Node plugin for Gesture support. This module is automatically loaded by loader when `dd` is used on a device that supports gestures.</td>