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