|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Drag and Drop</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>Drag and Drop</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><div class="intro"> |
|
|
31 |
<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> |
|
|
32 |
<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> |
|
|
33 |
</div> |
|
|
34 |
|
|
|
35 |
<h2 id="getting-started">Getting Started</h2> |
|
|
36 |
|
|
|
37 |
<p> |
|
|
38 |
To include the source files for Drag and Drop and its dependencies, first load |
|
|
39 |
the YUI seed file if you haven't already loaded it. |
|
|
40 |
</p> |
|
|
41 |
|
|
|
42 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
43 |
|
|
|
44 |
|
|
|
45 |
<p> |
|
|
46 |
Next, create a new YUI instance for your application and populate it with the |
|
|
47 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
48 |
YUI will automatically load any dependencies required by the modules you |
|
|
49 |
specify. |
|
|
50 |
</p> |
|
|
51 |
|
|
|
52 |
<pre class="code prettyprint"><script> |
|
|
53 |
// Create a new YUI instance and populate it with the required modules. |
|
|
54 |
YUI().use('dd', function (Y) { |
|
|
55 |
// Drag and Drop is available and ready for use. Add implementation |
|
|
56 |
// code here. |
|
|
57 |
}); |
|
|
58 |
</script></pre> |
|
|
59 |
|
|
|
60 |
|
|
|
61 |
<p> |
|
|
62 |
For more information on creating YUI instances and on the |
|
|
63 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
64 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
65 |
</p> |
|
|
66 |
|
|
|
67 |
|
|
|
68 |
<h2 id="using-drag-and-drop">Using Drag and Drop</h2> |
|
|
69 |
|
|
|
70 |
<h3 id="basic-drag">Basic Drag</h3> |
|
|
71 |
<p>You create a simple Drag instance by including the <code>dd-drag</code> module and using the following code:</p> |
|
|
72 |
|
|
|
73 |
<pre class="code prettyprint">YUI().use('dd-drag', function(Y) { |
|
|
74 |
var dd = new Y.DD.Drag({ |
|
|
75 |
node: '#drag' |
|
|
76 |
}); |
|
|
77 |
});</pre> |
|
|
78 |
|
|
|
79 |
|
|
|
80 |
<h3 id="basic-proxy-drag">Basic Proxy Drag</h3> |
|
|
81 |
<p>You create a simple Proxy Drag instance by including the <code>dd-drag</code> and <code>dd-proxy</code> modules and using the following code:</p> |
|
|
82 |
|
|
|
83 |
<pre class="code prettyprint">YUI().use('dd-drag', 'dd-proxy', function(Y) { |
|
|
84 |
var dd = new Y.DD.Drag({ |
|
|
85 |
node: '#drag' |
|
|
86 |
}).plug(Y.Plugin.DDProxy); //This config option makes the node a Proxy Drag |
|
|
87 |
});</pre> |
|
|
88 |
|
|
|
89 |
|
|
|
90 |
<h3 id="basic-drop-target">Basic Drop Target</h3> |
|
|
91 |
<p>You create a simple Drop Target instance by including the <code>dd-drop</code> module and using the following code:</p> |
|
|
92 |
|
|
|
93 |
<pre class="code prettyprint">YUI().use('dd-drop', function(Y) { |
|
|
94 |
var drop = new Y.DD.Drop({ |
|
|
95 |
node: '#drop' |
|
|
96 |
}); |
|
|
97 |
});</pre> |
|
|
98 |
|
|
|
99 |
<h3 id="handles">Using a Drag Handle</h3> |
|
|
100 |
|
|
|
101 |
<p>Drag handles allow you to specify what element will initiate a drag. For example, |
|
|
102 |
you may want the entire element to be able to be dragged, but you only want them to |
|
|
103 |
click on the header to do that (in case you have content that will not react well to |
|
|
104 |
a drag, like an <code>input</code> or an <code>anchor</code>).</p> |
|
|
105 |
|
|
|
106 |
<pre class="code prettyprint"><div id="demo"> |
|
|
107 |
<h2>Drag Me Here</h2> |
|
|
108 |
<p>Can't drag me here</p> |
|
|
109 |
</div></pre> |
|
|
110 |
|
|
|
111 |
|
|
|
112 |
<p> |
|
|
113 |
Using the <code>addHandle</code> method on the <code>Drag</code> instance, you can tell the <code>Drag</code> to only be |
|
|
114 |
started if the user clicks on that element. Any selector string will work here. |
|
|
115 |
</p> |
|
|
116 |
|
|
|
117 |
<pre class="code prettyprint">var dd = new Y.DD.Drag({ |
|
|
118 |
node: '#demo' |
|
|
119 |
}).addHandle('h2');</pre> |
|
|
120 |
|
|
|
121 |
|
|
|
122 |
<p> |
|
|
123 |
You can also use the <code>removeHandle</code> method to remove a previously added handle. |
|
|
124 |
</p> |
|
|
125 |
|
|
|
126 |
<h3 id="invalids">Invalid Handles</h3> |
|
|
127 |
|
|
|
128 |
<p> |
|
|
129 |
The opposite of handles are Invalid Handles. This is a selector string that will never |
|
|
130 |
fire a drag event. By default the following HTML elements will not be draggable since adding |
|
|
131 |
the mouse events to them prohibit their actual use: <code>textarea, input, a, button, select</code> |
|
|
132 |
</p> |
|
|
133 |
|
|
|
134 |
<p>If you need to drag one of these items, you will have to call <code>removeInvalid</code> on your |
|
|
135 |
<code>Drag</code> instance to remove it from the default list.</p> |
|
|
136 |
|
|
|
137 |
<pre class="code prettyprint"><ul> |
|
|
138 |
<li><a href="#"><img src="foo.png"></a></li> |
|
|
139 |
</ul></pre> |
|
|
140 |
|
|
|
141 |
|
|
|
142 |
<p>Now you create your <code>Drag</code> instance as usual, but call <code>removeInvalid</code> to allow the <code>img</code> to |
|
|
143 |
be dragged from inside the <code>li</code>.</p> |
|
|
144 |
|
|
|
145 |
<pre class="code prettyprint">var dd = new Y.DD.Drag({ |
|
|
146 |
node: 'ul li' |
|
|
147 |
}).removeInvalid('a');</pre> |
|
|
148 |
|
|
|
149 |
|
|
|
150 |
|
|
|
151 |
<h2 id="events">Events</h2> |
|
|
152 |
|
|
|
153 |
<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> |
|
|
154 |
<p><em>* All Drag and Drop events bubble, by default, to the Drag and Drop Manager.</em></p> |
|
|
155 |
|
|
|
156 |
<table> |
|
|
157 |
<thead> |
|
|
158 |
<tr> |
|
|
159 |
<th>Event</th> |
|
|
160 |
<th>Target</th> |
|
|
161 |
<th>Preventable</th> |
|
|
162 |
<th>Stoppable</th> |
|
|
163 |
<th>Description</th> |
|
|
164 |
</tr> |
|
|
165 |
</thead> |
|
|
166 |
<tbody> |
|
|
167 |
<tr> |
|
|
168 |
<td><code>drag:mouseDown</code></td> |
|
|
169 |
<td>Drag</td> |
|
|
170 |
<td>yes</td> |
|
|
171 |
<td>yes</td> |
|
|
172 |
<td>Handles the mousedown/touchstart DOM event, checks to see if you have a valid handle then starts the drag timers.</td> |
|
|
173 |
</tr> |
|
|
174 |
<tr> |
|
|
175 |
<td><code>drag:afterMouseDown</code></td> |
|
|
176 |
<td>Drag</td> |
|
|
177 |
<td>no</td> |
|
|
178 |
<td>no</td> |
|
|
179 |
<td>Fires after the mousedown/touchstart event has been cleared.</td> |
|
|
180 |
</tr> |
|
|
181 |
<tr> |
|
|
182 |
<td><code>drag:mouseup</code></td> |
|
|
183 |
<td>Drag</td> |
|
|
184 |
<td>yes</td> |
|
|
185 |
<td>yes</td> |
|
|
186 |
<td>Fires the mouseup event.</td> |
|
|
187 |
</tr> |
|
|
188 |
<tr> |
|
|
189 |
<td><code>drag:align</code></td> |
|
|
190 |
<td>Drag</td> |
|
|
191 |
<td>yes</td> |
|
|
192 |
<td>yes</td> |
|
|
193 |
<td>Fires when this node is aligned.</td> |
|
|
194 |
</tr> |
|
|
195 |
<tr> |
|
|
196 |
<td><code>drag:removeHandle</code></td> |
|
|
197 |
<td>Drag</td> |
|
|
198 |
<td>no</td> |
|
|
199 |
<td>no</td> |
|
|
200 |
<td>Fires after a handle is removed.</td> |
|
|
201 |
</tr> |
|
|
202 |
<tr> |
|
|
203 |
<td><code>drag:addHandle</code></td> |
|
|
204 |
<td>Drag</td> |
|
|
205 |
<td>no</td> |
|
|
206 |
<td>no</td> |
|
|
207 |
<td>Fires after a handle is added.</td> |
|
|
208 |
</tr> |
|
|
209 |
<tr> |
|
|
210 |
<td><code>drag:removeInvalid</code></td> |
|
|
211 |
<td>Drag</td> |
|
|
212 |
<td>no</td> |
|
|
213 |
<td>no</td> |
|
|
214 |
<td>Fires after an invalid selector is removed.</td> |
|
|
215 |
</tr> |
|
|
216 |
<tr> |
|
|
217 |
<td><code>drag:addInvalid</code></td> |
|
|
218 |
<td>Drag</td> |
|
|
219 |
<td>no</td> |
|
|
220 |
<td>no</td> |
|
|
221 |
<td>Fires after an invalid selector is added.</td> |
|
|
222 |
</tr> |
|
|
223 |
<tr> |
|
|
224 |
<td><code>drag:start</code></td> |
|
|
225 |
<td>Drag</td> |
|
|
226 |
<td>no</td> |
|
|
227 |
<td>no</td> |
|
|
228 |
<td>Fires at the start of a drag operation.</td> |
|
|
229 |
</tr> |
|
|
230 |
<tr> |
|
|
231 |
<td><code>drag:end</code></td> |
|
|
232 |
<td>Drag</td> |
|
|
233 |
<td>yes</td> |
|
|
234 |
<td>yes</td> |
|
|
235 |
<td>Fires at the end of a drag operation.</td> |
|
|
236 |
</tr> |
|
|
237 |
<tr> |
|
|
238 |
<td><code>drag:drag</code></td> |
|
|
239 |
<td>Drag</td> |
|
|
240 |
<td>yes</td> |
|
|
241 |
<td>yes</td> |
|
|
242 |
<td>Fires every mousemove/touchmove during a drag operation.</td> |
|
|
243 |
</tr> |
|
|
244 |
<tr> |
|
|
245 |
<td><code>drag:over</code></td> |
|
|
246 |
<td>Drag</td> |
|
|
247 |
<td>no</td> |
|
|
248 |
<td>no</td> |
|
|
249 |
<td>Fires when this node is over a Drop Target. (Fired from dd-drop)</td> |
|
|
250 |
</tr> |
|
|
251 |
<tr> |
|
|
252 |
<td><code>drag:enter</code></td> |
|
|
253 |
<td>Drag</td> |
|
|
254 |
<td>no</td> |
|
|
255 |
<td>no</td> |
|
|
256 |
<td>Fires when this node enters a Drop Target. (Fired from dd-drop)</td> |
|
|
257 |
</tr> |
|
|
258 |
<tr> |
|
|
259 |
<td><code>drag:exit</code></td> |
|
|
260 |
<td>Drag</td> |
|
|
261 |
<td>no</td> |
|
|
262 |
<td>no</td> |
|
|
263 |
<td>Fires when this node exits a Drop Target. (Fired from dd-drop)</td> |
|
|
264 |
</tr> |
|
|
265 |
<tr> |
|
|
266 |
<td><code>drag:drophit</code></td> |
|
|
267 |
<td>Drag</td> |
|
|
268 |
<td>no</td> |
|
|
269 |
<td>no</td> |
|
|
270 |
<td>Fires when this node is dropped on a valid Drop Target. (Fired from dd-ddm-drop)</td> |
|
|
271 |
</tr> |
|
|
272 |
<tr> |
|
|
273 |
<td><code>drag:dropmiss</code></td> |
|
|
274 |
<td>Drag</td> |
|
|
275 |
<td>no</td> |
|
|
276 |
<td>no</td> |
|
|
277 |
<td>Fires when this node is dropped on an invalid Drop Target. (Fired from dd-ddm-drop)</td> |
|
|
278 |
</tr> |
|
|
279 |
<tr> |
|
|
280 |
<td><code>drop:over</code></td> |
|
|
281 |
<td>Drop</td> |
|
|
282 |
<td>no</td> |
|
|
283 |
<td>no</td> |
|
|
284 |
<td>Fires when a drag element is over this target.</td> |
|
|
285 |
</tr> |
|
|
286 |
<tr> |
|
|
287 |
<td><code>drop:enter</code></td> |
|
|
288 |
<td>Drop</td> |
|
|
289 |
<td>no</td> |
|
|
290 |
<td>no</td> |
|
|
291 |
<td>Fires when a drag element enters this target.</td> |
|
|
292 |
</tr> |
|
|
293 |
<tr> |
|
|
294 |
<td><code>drop:exit</code></td> |
|
|
295 |
<td>Drop</td> |
|
|
296 |
<td>no</td> |
|
|
297 |
<td>no</td> |
|
|
298 |
<td>Fires when a drag element exits this target.</td> |
|
|
299 |
</tr> |
|
|
300 |
<tr> |
|
|
301 |
<td><code>drop:hit</code></td> |
|
|
302 |
<td>Drop</td> |
|
|
303 |
<td>no</td> |
|
|
304 |
<td>no</td> |
|
|
305 |
<td>Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)</td> |
|
|
306 |
</tr> |
|
|
307 |
</tbody> |
|
|
308 |
</table> |
|
|
309 |
|
|
|
310 |
<h3 id="bubbling">Event Bubbling</h3> |
|
|
311 |
|
|
|
312 |
<p>To allow for a truly Event driven application, all Drag and Drop related events are bubbled to the <code>DragDropMgr</code>.</p> |
|
|
313 |
<p>This allows you to listen for all Drag and Drop events from a central location, per YUI instance.</p> |
|
|
314 |
<p>This approach is also handy for situations where you are dynamically adding and removing items.</p> |
|
|
315 |
<p>So instead of doing this:</p> |
|
|
316 |
|
|
|
317 |
<pre class="code prettyprint">var doSomething = function() { |
|
|
318 |
Y.log('Do Something Here'); |
|
|
319 |
}; |
|
|
320 |
dd1.on('drag:drag', doSomething); |
|
|
321 |
dd2.on('drag:drag', doSomething); |
|
|
322 |
dd3.on('drag:drag', doSomething); |
|
|
323 |
dd4.on('drag:drag', doSomething); |
|
|
324 |
dd5.on('drag:drag', doSomething); |
|
|
325 |
dd6.on('drag:drag', doSomething); |
|
|
326 |
dd7.on('drag:drag', doSomething); |
|
|
327 |
dd8.on('drag:drag', doSomething); |
|
|
328 |
dd9.on('drag:drag', doSomething);</pre> |
|
|
329 |
|
|
|
330 |
|
|
|
331 |
<p>You can now do this:</p> |
|
|
332 |
|
|
|
333 |
<pre class="code prettyprint">var doSomething = function() { |
|
|
334 |
Y.log('Do Something Here'); |
|
|
335 |
}; |
|
|
336 |
Y.DD.DDM.on('drag:drag', doSomething);</pre> |
|
|
337 |
|
|
|
338 |
|
|
|
339 |
<h2 id="delegate">Delegate Dragging</h2> |
|
|
340 |
<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> |
|
|
341 |
<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 <code>Delegate</code> you wouldn't have to create a new <code>drag</code> instance when adding or removing it.</p> |
|
|
342 |
|
|
|
343 |
<pre class="code prettyprint">YUI().use('dd-delegate', function(Y) { |
|
|
344 |
var del = new Y.DD.Delegate({ |
|
|
345 |
container: '#demo', //The common container |
|
|
346 |
nodes: '.item' //The items to make draggable |
|
|
347 |
}); |
|
|
348 |
});</pre> |
|
|
349 |
|
|
|
350 |
|
|
|
351 |
<p><strong>Note:</strong> <code>DD.Delegate</code> does not auto find your drop target items, if you change the <code>nodes</code> under the hood (add or remove) you need to call <code>delegate.syncTargets();</code> to manage them.</p> |
|
|
352 |
|
|
|
353 |
|
|
|
354 |
<h2 id="cssclasses">CSS Class Names</h2> |
|
|
355 |
|
|
|
356 |
<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> |
|
|
357 |
<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> |
|
|
358 |
<p><strong>Note: </strong> As of version 3.1.0, Drag and Drop changed it's classname prefix from <code>yui-dd</code> to <code>yui3-dd</code> to mimic the global change in skinning.</p> |
|
|
359 |
<table> |
|
|
360 |
<thead> |
|
|
361 |
<tr> |
|
|
362 |
<th>Class Name</th> |
|
|
363 |
<th>Target</th> |
|
|
364 |
<th>State</th> |
|
|
365 |
</tr> |
|
|
366 |
</thead> |
|
|
367 |
<tbody> |
|
|
368 |
<tr> |
|
|
369 |
<td nowrap="nowrap"><code>yui3-dd-draggable</code></td> |
|
|
370 |
<td>Drag</td> |
|
|
371 |
<td>Given to all Drag Nodes</td> |
|
|
372 |
</tr> |
|
|
373 |
<tr> |
|
|
374 |
<td nowrap="nowrap"><code>yui3-dd-locked</code></td> |
|
|
375 |
<td>Drag</td> |
|
|
376 |
<td>Added when a Drag instance is locked</td> |
|
|
377 |
</tr> |
|
|
378 |
<tr> |
|
|
379 |
<td nowrap="nowrap"><code>yui3-dd-dragging</code></td> |
|
|
380 |
<td>Drag</td> |
|
|
381 |
<td>Added while a Drag instance is active</td> |
|
|
382 |
</tr> |
|
|
383 |
<tr> |
|
|
384 |
<td nowrap="nowrap"><code>yui3-dd-proxy</code></td> |
|
|
385 |
<td>Proxy</td> |
|
|
386 |
<td>Given to the Proxy Node</td> |
|
|
387 |
</tr> |
|
|
388 |
<tr> |
|
|
389 |
<td nowrap="nowrap"><code>yui3-dd-drop</code></td> |
|
|
390 |
<td>Drop</td> |
|
|
391 |
<td>Given to all Drop Targets</td> |
|
|
392 |
</tr> |
|
|
393 |
<tr> |
|
|
394 |
<td nowrap="nowrap"><code>yui3-dd-drop-locked</code></td> |
|
|
395 |
<td>Drop</td> |
|
|
396 |
<td>Added when a Drop instance is locked</td> |
|
|
397 |
</tr> |
|
|
398 |
<tr> |
|
|
399 |
<td nowrap="nowrap"><code>yui3-dd-drop-active-valid</code></td> |
|
|
400 |
<td>Drop</td> |
|
|
401 |
<td>Added to a Drop when it is an valid target for the current drag operation</td> |
|
|
402 |
</tr> |
|
|
403 |
<tr> |
|
|
404 |
<td nowrap="nowrap"><code>yui3-dd-drop-active-invalid</code></td> |
|
|
405 |
<td>Drop</td> |
|
|
406 |
<td>Added to a Drop when it is an invalid target for the current drag operation</td> |
|
|
407 |
</tr> |
|
|
408 |
<tr> |
|
|
409 |
<td nowrap="nowrap"><code>yui3-dd-drop-over</code></td> |
|
|
410 |
<td>Drop</td> |
|
|
411 |
<td>Added when a Drag instance is over this Drop Target</td> |
|
|
412 |
</tr> |
|
|
413 |
</tbody> |
|
|
414 |
</table> |
|
|
415 |
|
|
|
416 |
<h2 id="gestures">Touch/Gesture Support</h2> |
|
|
417 |
|
|
|
418 |
<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 <code>dd</code> is used, loader will check the device to see if it contains support for Gesture Events, if the device supports these events the <code>dd-gestures</code> 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> |
|
|
419 |
|
|
|
420 |
|
|
|
421 |
|
|
|
422 |
|
|
|
423 |
<h2 id="modules">Module Descriptions</h2> |
|
|
424 |
|
|
|
425 |
<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> |
|
|
426 |
<table> |
|
|
427 |
<thead> |
|
|
428 |
<tr> |
|
|
429 |
<th>Module Name</th> |
|
|
430 |
<th>Description</th> |
|
|
431 |
</tr> |
|
|
432 |
</thead> |
|
|
433 |
<tbody> |
|
|
434 |
<tr> |
|
|
435 |
<td nowrap="nowrap"><code>dd-drag</code></td> |
|
|
436 |
<td>Main drag class, this makes something draggable.</td> |
|
|
437 |
</tr> |
|
|
438 |
<tr> |
|
|
439 |
<td nowrap="nowrap"><code>dd-proxy</code></td> |
|
|
440 |
<td>Adds proxy support to the main drag class.</td> |
|
|
441 |
</tr> |
|
|
442 |
<tr> |
|
|
443 |
<td nowrap="nowrap"><code>dd-constrain</code></td> |
|
|
444 |
<td>Adds constrain support to the main drag class.</td> |
|
|
445 |
</tr> |
|
|
446 |
<tr> |
|
|
447 |
<td nowrap="nowrap"><code>dd-scroll</code></td> |
|
|
448 |
<td>Adds node and window based scroll support.</td> |
|
|
449 |
</tr> |
|
|
450 |
<tr> |
|
|
451 |
<td nowrap="nowrap"><code>dd-delegate</code></td> |
|
|
452 |
<td>Provides the ability to drag multiple nodes under a container element using only one Y.DD.Drag instance as a delegate.</td> |
|
|
453 |
</tr> |
|
|
454 |
<tr> |
|
|
455 |
<td nowrap="nowrap"><code>dd-drop</code></td> |
|
|
456 |
<td>Drop Support, this is the support for all drop targets.</td> |
|
|
457 |
</tr> |
|
|
458 |
<tr> |
|
|
459 |
<td nowrap="nowrap"><code>dd</code></td> |
|
|
460 |
<td>All of the Drag and Drop modules rolled up into one file.</td> |
|
|
461 |
</tr> |
|
|
462 |
<tr> |
|
|
463 |
<th colspan="2">Other Included Modules</th> |
|
|
464 |
</tr> |
|
|
465 |
<tr> |
|
|
466 |
<td nowrap="nowrap"><code>dd-ddm-base</code></td> |
|
|
467 |
<td>Base DragDrop Manager, required to make something draggable.</td> |
|
|
468 |
</tr> |
|
|
469 |
<tr> |
|
|
470 |
<td nowrap="nowrap"><code>dd-ddm</code></td> |
|
|
471 |
<td>Adds shim support, only needed when you need to drag over something that steals mouse events or you are targeting.</td> |
|
|
472 |
</tr> |
|
|
473 |
<tr> |
|
|
474 |
<td nowrap="nowrap"><code>dd-ddm-drop</code></td> |
|
|
475 |
<td>Adds Drop support, only required when you have drop targets you need to interact with.</td> |
|
|
476 |
</tr> |
|
|
477 |
</tbody> |
|
|
478 |
</table> |
|
|
479 |
|
|
|
480 |
<h2 id="plugins">DD Plugins</h2> |
|
|
481 |
|
|
|
482 |
<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 <code>dd</code> rollup.</p> |
|
|
483 |
<table> |
|
|
484 |
<thead> |
|
|
485 |
<tr> |
|
|
486 |
<th>Plugin</th> |
|
|
487 |
<th>Description</th> |
|
|
488 |
</tr> |
|
|
489 |
</thead> |
|
|
490 |
<tbody> |
|
|
491 |
<tr> |
|
|
492 |
<td nowrap="nowrap"><code>dd-plugin</code></td> |
|
|
493 |
<td>Node plugin for Drag</td> |
|
|
494 |
</tr> |
|
|
495 |
<tr> |
|
|
496 |
<td nowrap="nowrap"><code>dd-drop-plugin</code></td> |
|
|
497 |
<td>Node plugin for Drop</td> |
|
|
498 |
</tr> |
|
|
499 |
<tr> |
|
|
500 |
<td nowrap="nowrap"><code>dd-gestures</code></td> |
|
|
501 |
<td>Node plugin for Gesture support. This module is automatically loaded by loader when <code>dd</code> is used on a device that supports gestures.</td> |
|
|
502 |
</tr> |
|
|
503 |
</tbody> |
|
|
504 |
</table> |
|
|
505 |
|
|
|
506 |
</div> |
|
|
507 |
</div> |
|
|
508 |
</div> |
|
|
509 |
|
|
|
510 |
<div class="yui3-u-1-4"> |
|
|
511 |
<div class="sidebar"> |
|
|
512 |
|
|
|
513 |
<div id="toc" class="sidebox"> |
|
|
514 |
<div class="hd"> |
|
|
515 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
516 |
</div> |
|
|
517 |
|
|
|
518 |
<div class="bd"> |
|
|
519 |
<ul class="toc"> |
|
|
520 |
<li> |
|
|
521 |
<a href="#getting-started">Getting Started</a> |
|
|
522 |
</li> |
|
|
523 |
<li> |
|
|
524 |
<a href="#using-drag-and-drop">Using Drag and Drop</a> |
|
|
525 |
<ul class="toc"> |
|
|
526 |
<li> |
|
|
527 |
<a href="#basic-drag">Basic Drag</a> |
|
|
528 |
</li> |
|
|
529 |
<li> |
|
|
530 |
<a href="#basic-proxy-drag">Basic Proxy Drag</a> |
|
|
531 |
</li> |
|
|
532 |
<li> |
|
|
533 |
<a href="#basic-drop-target">Basic Drop Target</a> |
|
|
534 |
</li> |
|
|
535 |
<li> |
|
|
536 |
<a href="#handles">Using a Drag Handle</a> |
|
|
537 |
</li> |
|
|
538 |
<li> |
|
|
539 |
<a href="#invalids">Invalid Handles</a> |
|
|
540 |
</li> |
|
|
541 |
</ul> |
|
|
542 |
</li> |
|
|
543 |
<li> |
|
|
544 |
<a href="#events">Events</a> |
|
|
545 |
<ul class="toc"> |
|
|
546 |
<li> |
|
|
547 |
<a href="#bubbling">Event Bubbling</a> |
|
|
548 |
</li> |
|
|
549 |
</ul> |
|
|
550 |
</li> |
|
|
551 |
<li> |
|
|
552 |
<a href="#delegate">Delegate Dragging</a> |
|
|
553 |
</li> |
|
|
554 |
<li> |
|
|
555 |
<a href="#cssclasses">CSS Class Names</a> |
|
|
556 |
</li> |
|
|
557 |
<li> |
|
|
558 |
<a href="#gestures">Touch/Gesture Support</a> |
|
|
559 |
</li> |
|
|
560 |
<li> |
|
|
561 |
<a href="#modules">Module Descriptions</a> |
|
|
562 |
</li> |
|
|
563 |
<li> |
|
|
564 |
<a href="#plugins">DD Plugins</a> |
|
|
565 |
</li> |
|
|
566 |
</ul> |
|
|
567 |
</div> |
|
|
568 |
</div> |
|
|
569 |
|
|
|
570 |
|
|
|
571 |
|
|
|
572 |
<div class="sidebox"> |
|
|
573 |
<div class="hd"> |
|
|
574 |
<h2 class="no-toc">Examples</h2> |
|
|
575 |
</div> |
|
|
576 |
|
|
|
577 |
<div class="bd"> |
|
|
578 |
<ul class="examples"> |
|
|
579 |
|
|
|
580 |
|
|
|
581 |
<li data-description="A simple drag interaction that doesn't require a drop interaction."> |
|
|
582 |
<a href="simple-drag.html">Simple Drag</a> |
|
|
583 |
</li> |
|
|
584 |
|
|
|
585 |
|
|
|
586 |
|
|
|
587 |
<li data-description="How to apply the Drag Plugin to a node."> |
|
|
588 |
<a href="drag-plugin.html">Drag - Node plugin</a> |
|
|
589 |
</li> |
|
|
590 |
|
|
|
591 |
|
|
|
592 |
|
|
|
593 |
<li data-description="A simple proxy drag interaction that doesn't require a drop interaction."> |
|
|
594 |
<a href="proxy-drag.html">Drag - Proxy</a> |
|
|
595 |
</li> |
|
|
596 |
|
|
|
597 |
|
|
|
598 |
|
|
|
599 |
<li data-description="How to constrain a draggable Node to another Node's region."> |
|
|
600 |
<a href="constrained-drag.html">Drag - Constrained to a Region</a> |
|
|
601 |
</li> |
|
|
602 |
|
|
|
603 |
|
|
|
604 |
|
|
|
605 |
<li data-description="Using interaction groups, this example demonstrates how to tie into the Drag & Drop Utility's interesting moments to provide visual affordances for the current drag operation."> |
|
|
606 |
<a href="groups-drag.html">Drag - Interaction Groups</a> |
|
|
607 |
</li> |
|
|
608 |
|
|
|
609 |
|
|
|
610 |
|
|
|
611 |
<li data-description="The use of the drag shim when dragging nodes over other troublesome nodes."> |
|
|
612 |
<a href="shim-drag.html">Using the Drag Shim</a> |
|
|
613 |
</li> |
|
|
614 |
|
|
|
615 |
|
|
|
616 |
|
|
|
617 |
<li data-description="How to use the Drop Target events to code your application."> |
|
|
618 |
<a href="drop-code.html">Using Drop Based Coding</a> |
|
|
619 |
</li> |
|
|
620 |
|
|
|
621 |
|
|
|
622 |
|
|
|
623 |
<li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag."> |
|
|
624 |
<a href="winscroll.html">Window Scrolling</a> |
|
|
625 |
</li> |
|
|
626 |
|
|
|
627 |
|
|
|
628 |
|
|
|
629 |
<li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items."> |
|
|
630 |
<a href="delegate.html">Drag Delegation</a> |
|
|
631 |
</li> |
|
|
632 |
|
|
|
633 |
|
|
|
634 |
|
|
|
635 |
<li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target."> |
|
|
636 |
<a href="delegate-drop.html">Drag Delegation with a Drop Target</a> |
|
|
637 |
</li> |
|
|
638 |
|
|
|
639 |
|
|
|
640 |
|
|
|
641 |
<li data-description="How to use Drag plugins with a DD Delegate based solution."> |
|
|
642 |
<a href="delegate-plugins.html">Using Drag Plugins with Delegate</a> |
|
|
643 |
</li> |
|
|
644 |
|
|
|
645 |
|
|
|
646 |
|
|
|
647 |
<li data-description="This example shows how to make a sortable list using Custom Event Bubbling."> |
|
|
648 |
<a href="list-drag.html">List Reorder w/Bubbling</a> |
|
|
649 |
</li> |
|
|
650 |
|
|
|
651 |
|
|
|
652 |
|
|
|
653 |
<li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling."> |
|
|
654 |
<a href="scroll-list.html">List Reorder w/Scrolling</a> |
|
|
655 |
</li> |
|
|
656 |
|
|
|
657 |
|
|
|
658 |
|
|
|
659 |
<li data-description="How to make an animated node a Drop target."> |
|
|
660 |
<a href="anim-drop.html">Animated Drop Targets</a> |
|
|
661 |
</li> |
|
|
662 |
|
|
|
663 |
|
|
|
664 |
|
|
|
665 |
<li data-description="Example Photo Browser application."> |
|
|
666 |
<a href="photo-browser.html">Photo Browser</a> |
|
|
667 |
</li> |
|
|
668 |
|
|
|
669 |
|
|
|
670 |
|
|
|
671 |
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation."> |
|
|
672 |
<a href="portal-drag.html">Portal Style Example</a> |
|
|
673 |
</li> |
|
|
674 |
|
|
|
675 |
|
|
|
676 |
|
|
|
677 |
|
|
|
678 |
|
|
|
679 |
|
|
|
680 |
</ul> |
|
|
681 |
</div> |
|
|
682 |
</div> |
|
|
683 |
|
|
|
684 |
|
|
|
685 |
|
|
|
686 |
<div class="sidebox"> |
|
|
687 |
<div class="hd"> |
|
|
688 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
689 |
</div> |
|
|
690 |
|
|
|
691 |
<div class="bd"> |
|
|
692 |
<ul class="examples"> |
|
|
693 |
|
|
|
694 |
|
|
|
695 |
|
|
|
696 |
|
|
|
697 |
|
|
|
698 |
|
|
|
699 |
|
|
|
700 |
|
|
|
701 |
|
|
|
702 |
|
|
|
703 |
|
|
|
704 |
|
|
|
705 |
|
|
|
706 |
|
|
|
707 |
|
|
|
708 |
|
|
|
709 |
|
|
|
710 |
|
|
|
711 |
|
|
|
712 |
|
|
|
713 |
|
|
|
714 |
|
|
|
715 |
|
|
|
716 |
|
|
|
717 |
|
|
|
718 |
|
|
|
719 |
|
|
|
720 |
|
|
|
721 |
|
|
|
722 |
|
|
|
723 |
|
|
|
724 |
|
|
|
725 |
|
|
|
726 |
|
|
|
727 |
<li data-description="Working with multiple YUI instances."> |
|
|
728 |
<a href="../yui/yui-multi.html">Multiple Instances</a> |
|
|
729 |
</li> |
|
|
730 |
|
|
|
731 |
|
|
|
732 |
|
|
|
733 |
<li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input"> |
|
|
734 |
<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a> |
|
|
735 |
</li> |
|
|
736 |
|
|
|
737 |
|
|
|
738 |
</ul> |
|
|
739 |
</div> |
|
|
740 |
</div> |
|
|
741 |
|
|
|
742 |
</div> |
|
|
743 |
</div> |
|
|
744 |
</div> |
|
|
745 |
</div> |
|
|
746 |
|
|
|
747 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
748 |
<script>prettyPrint();</script> |
|
|
749 |
|
|
|
750 |
<script> |
|
|
751 |
YUI.Env.Tests = { |
|
|
752 |
examples: [], |
|
|
753 |
project: '../assets', |
|
|
754 |
assets: '../assets/dd', |
|
|
755 |
name: 'dd', |
|
|
756 |
title: 'Drag and Drop', |
|
|
757 |
newWindow: '', |
|
|
758 |
auto: false |
|
|
759 |
}; |
|
|
760 |
YUI.Env.Tests.examples.push('simple-drag'); |
|
|
761 |
YUI.Env.Tests.examples.push('drag-plugin'); |
|
|
762 |
YUI.Env.Tests.examples.push('proxy-drag'); |
|
|
763 |
YUI.Env.Tests.examples.push('constrained-drag'); |
|
|
764 |
YUI.Env.Tests.examples.push('groups-drag'); |
|
|
765 |
YUI.Env.Tests.examples.push('shim-drag'); |
|
|
766 |
YUI.Env.Tests.examples.push('drop-code'); |
|
|
767 |
YUI.Env.Tests.examples.push('winscroll'); |
|
|
768 |
YUI.Env.Tests.examples.push('delegate'); |
|
|
769 |
YUI.Env.Tests.examples.push('delegate-drop'); |
|
|
770 |
YUI.Env.Tests.examples.push('delegate-plugins'); |
|
|
771 |
YUI.Env.Tests.examples.push('list-drag'); |
|
|
772 |
YUI.Env.Tests.examples.push('scroll-list'); |
|
|
773 |
YUI.Env.Tests.examples.push('anim-drop'); |
|
|
774 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
775 |
YUI.Env.Tests.examples.push('portal-drag'); |
|
|
776 |
YUI.Env.Tests.examples.push('yui-multi'); |
|
|
777 |
YUI.Env.Tests.examples.push('stylesheet-theme'); |
|
|
778 |
|
|
|
779 |
</script> |
|
|
780 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
781 |
|
|
|
782 |
|
|
|
783 |
|
|
|
784 |
</body> |
|
|
785 |
</html> |