22:
282:, a programming environment for kids, introduced the modern notion of drag and drop blocks programming providing 4 core affordances: 1) Blocks that are end-user composable, 2) blocks are end-user editable, 3) blocks can be nested to represent tree structures, 4) blocks are arranged geometrically to define syntax. Drag and drop is also featured in many shader editing programs for graphics tools, such as
158:, extending "click and drag" to common clipboard operations like copying or moving textual content within a document. Content could also be dragged into the filesystem to create a "clipping file" which could then be stored and reused. Files could also be dropped on application windows, for example to enclose a document in an email, or add an image to a word processor document.
122:
Another problem is that the target of the dropping can be hidden under other objects. The user would have to stop the dragging, make both the source and the target visible and start again. In classic Mac OS the top-of-screen menu bar served as a universal "drag cancel" target. This issue has been
112:). However, drag-and-drop operations have the advantage of thoughtfully chunking together two operands (the object to drag, and the drop location) into a single action. Extended dragging and dropping (as in graphic design) can stress the mousing hand.
219:
Based on needed action, one of the above types can be used. Note that when an HTML element is dragged for moving its current position, its ID is sent to the destination parent element; so it sends a text and can be considered as the first group.
277:
systems. In contrast to more traditional, text-based programming languages, many end-user programming languages are based on visual components such as tiles or icons that are manipulated by end users through drag-and-drop interfaces.
71:, though it is sometimes a fast and easy-to-learn technique. However, it is not always clear to users that an item can be dragged and dropped, or what command is performed by the drag and drop, which can decrease usability.
468:
108:
Dragging requires more physical effort than moving the same pointing device without holding down any buttons. Because of this, a user cannot move as quickly and precisely while dragging (see
343:
or window for viewing or processing. For instance, dropping an icon that represents a text file into a
Microsoft Word window signifies "Open this document as a new document in Word"
60:
it to a different location or onto another virtual object. In general, it can be used to invoke many kinds of actions, or create various types of associations between two
561:
165:
with the button covering a large portion of the top surface of the mouse. This may mitigate the ergonomic concerns of keeping the button pressed while dragging.
261:
implements a drag-and-drop feature which allows the user to touch items (and tap with other fingers to drag more) within an app or between apps on
597:
205:
working draft specification includes support for drag and drop. HTML5 supports different kinds of dragging and dropping features including:
482:
510:
572:
536:
633:
446:
151:
added the ability to open a document in an application by dropping the document icon onto the application's icon.
119:
and drags items. Imprecise movement can cause an attempt to select an object to register as a dragging motion.
247:
Touch screen interfaces also include drag and drop, or more precisely, long press, and then drag, e.g. on the
252:
116:
265:. On iPhones, the functionality is only available within the same app that the user started the drag.
605:
412:
361:
84:
41:
49:
235:(5.x). Google Images permits users to drag and drop image files into a browser to perform a
274:
236:
232:
190:
511:"iPad Drag and Drop, Multitasking, and Split View in iOS 11: Everything you need to know!"
432:
185:, leaving the primary one for selection and clicking. Its use like that of other advanced
128:
8:
311:
299:
389:
357:
283:
186:
340:
337:
318:
291:
53:
562:"Moving Beyond Syntax: Lessons from 20 Years of Blocks Programing in AgentSheets"
407:
174:
95:
61:
496:
273:
Drag and drop is considered an important program construction approach in many
144:
91:
627:
402:
347:
333:
322:
287:
228:
109:
385:
Most word processors allow dragging selected text from one point to another.
367:
Dragging an attribute onto an object to which the command is to be applied,
182:
162:
101:"Drag" the object to the desired location by moving the pointer to this one
454:
147:
to manipulate files (for example, copying them between disks or folders).
295:
279:
30:
375:
Dragging a tool to a canvas location to apply the tool at that location,
21:
155:
379:
286:. Drag and drop also features in some video game engines, including
315:
148:
124:
68:
38:
447:"Chunking and Phrasing and the Design of Human-Computer Dialogues"
370:
e.g. dragging a color onto a graphical object to change its color,
29:
is dragged onto a web browser icon, which opens the image in the
258:
248:
227:
supports drag-and-drop of images and attachments in the latest
224:
202:
26:
262:
178:
382:
from one location or word to another location or document.
67:
As a feature, drag-and-drop support is not found in all
433:
http://www.useit.com/alertbox/application-mistakes.html
537:"The iPhone is also getting drag and drop with iOS 11"
431:
Jakob
Nielsen, "Top-10 Application-Design Mistakes,"
189:
features distinguished native OS/2 applications from
353:
Adding objects to a list of objects to be processed,
310:A common example is dragging an icon on a virtual
79:The basic sequence involved in drag and drop is:
625:
569:Journal of Visual Languages and Sentient Systems
181:uses dragging and dropping extensively with the
451:Proceedings of the IFIP World Computer Congress
115:A design problem appears when the same button
56:selects a virtual object by "grabbing" it and
388:Dragging a series of code blocks such as in
444:
268:
161:For most of its history Mac OS has used a
16:Action in computer graphic user interfaces
483:"The Grand Unified Model (2): The Finder"
154:Apple added "Macintosh Drag and Drop" to
104:"Drop" the object by releasing the button
90:Press, and hold down, the button on the
20:
534:
626:
223:Google's web-based e-mail application
392:for designing shaders and materials.
242:
598:"Render – Blender Reference Manual"
350:to a new location/directory/folder,
13:
453:. pp. 475–480. Archived from
209:Drag and Drop texts and HTML codes
14:
645:
590:
554:
535:Vincent, James (7 June 2017).
528:
503:
489:
475:
461:
438:
425:
1:
418:
143:at the time, was used in the
134:
7:
396:
305:
212:Drag and Drop HTML elements
10:
650:
364:to customize their layout,
328:Further examples include:
196:
168:
74:
634:User interface techniques
497:"HTML5 W3C Working Draft"
127:with the introduction of
42:graphical user interfaces
413:Snap (computer graphics)
362:graphical user interface
269:In end-user programming
50:pointing device gesture
469:"Disk Swapper's Elbow"
183:secondary mouse button
139:Drag and drop, called
98:, to "grab" the object
34:
298:and, with expansion,
24:
275:end-user development
237:reverse image search
231:browser and Apple's
191:platform-independent
445:Buxton, W. (1986).
435:(19 February 2008).
215:Drag and Drop files
163:single button mouse
346:Moving or copying
187:Common User Access
145:original Macintosh
35:
243:On a touch screen
641:
618:
617:
615:
613:
608:on 23 March 2015
604:. Archived from
594:
588:
587:
585:
583:
578:on 28 April 2019
577:
571:. Archived from
566:
558:
552:
551:
549:
547:
532:
526:
525:
523:
521:
507:
501:
500:
493:
487:
486:
479:
473:
472:
465:
459:
458:
442:
436:
429:
332:Dragging a data
292:GameMaker Studio
62:abstract objects
649:
648:
644:
643:
642:
640:
639:
638:
624:
623:
622:
621:
611:
609:
596:
595:
591:
581:
579:
575:
564:
560:
559:
555:
545:
543:
533:
529:
519:
517:
509:
508:
504:
495:
494:
490:
485:. folklore.org.
481:
480:
476:
471:. folklore.org.
467:
466:
462:
457:on 7 June 2004.
443:
439:
430:
426:
421:
408:Point and click
399:
308:
271:
245:
199:
175:Workplace Shell
171:
137:
96:pointing device
77:
17:
12:
11:
5:
647:
637:
636:
620:
619:
589:
553:
527:
502:
488:
474:
460:
437:
423:
422:
420:
417:
416:
415:
410:
405:
398:
395:
394:
393:
386:
383:
376:
373:
372:
371:
365:
354:
351:
344:
307:
304:
270:
267:
255:home screens.
244:
241:
217:
216:
213:
210:
198:
195:
170:
167:
141:click and drag
136:
133:
123:dealt with in
106:
105:
102:
99:
88:
76:
73:
15:
9:
6:
4:
3:
2:
646:
635:
632:
631:
629:
607:
603:
599:
593:
574:
570:
563:
557:
542:
538:
531:
516:
512:
506:
498:
492:
484:
478:
470:
464:
456:
452:
448:
441:
434:
428:
424:
414:
411:
409:
406:
404:
403:Mouse gesture
401:
400:
391:
387:
384:
381:
377:
374:
369:
368:
366:
363:
359:
355:
352:
349:
345:
342:
339:
335:
331:
330:
329:
326:
324:
320:
317:
314:to a special
313:
303:
301:
297:
293:
289:
288:Unreal Engine
285:
281:
276:
266:
264:
260:
256:
254:
250:
240:
238:
234:
230:
229:Google Chrome
226:
221:
214:
211:
208:
207:
206:
204:
194:
192:
188:
184:
180:
176:
166:
164:
159:
157:
152:
150:
146:
142:
132:
130:
126:
120:
118:
113:
111:
103:
100:
97:
93:
89:
87:to the object
86:
82:
81:
80:
72:
70:
65:
63:
59:
55:
52:in which the
51:
47:
46:drag and drop
43:
40:
32:
28:
23:
19:
610:. Retrieved
606:the original
601:
592:
580:. Retrieved
573:the original
568:
556:
544:. Retrieved
540:
530:
518:. Retrieved
514:
505:
491:
477:
463:
455:the original
450:
440:
427:
356:Rearranging
327:
321:to delete a
309:
272:
257:
246:
222:
218:
200:
172:
160:
153:
140:
138:
121:
114:
107:
78:
66:
57:
45:
36:
18:
602:blender.org
582:29 November
378:Creating a
296:Construct 2
280:AgentSheets
31:web browser
612:24 January
520:10 October
419:References
156:System 7.5
110:Fitts' law
541:The Verge
499:. w3.org.
380:hyperlink
135:In Mac OS
94:or other
83:Move the
628:Category
397:See also
316:trashcan
306:Examples
149:System 7
125:Mac OS X
69:software
58:dragging
39:computer
546:23 June
390:Blender
358:widgets
338:program
336:onto a
312:desktop
284:Blender
253:Android
197:In HTML
193:ports.
169:In OS/2
117:selects
85:pointer
75:Actions
259:iOS 11
249:iPhone
233:Safari
129:Exposé
576:(PDF)
565:(PDF)
515:iMore
360:in a
348:files
300:Unity
263:iPads
225:Gmail
203:HTML5
92:mouse
48:is a
27:image
614:2014
584:2018
548:2017
522:2017
341:icon
334:file
323:file
319:icon
201:The
179:OS/2
173:The
54:user
251:or
177:of
37:In
25:An
630::
600:.
567:.
539:.
513:.
449:.
325:.
302:.
294:,
290:,
239:.
131:.
64:.
44:,
616:.
586:.
550:.
524:.
33:.
Text is available under the Creative Commons Attribution-ShareAlike License. Additional terms may apply.
