Drag-and-drop
Encyclopedia
In computer
graphical user interface
s, drag-and-drop is the action of (or support for the action of) selecting a virtual object by "grabbing" it and dragging 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 abstract object
s.
As a feature, support for drag-and-drop is not found in all software, though it is sometimes a fast and easy-to-learn technique for users to perform tasks. However, the lack of affordance
s in drag-and-drop implementations means that it is not always obvious that an item can be dragged.
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 Fitts' law
). 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.
A design problem appears when the same button selects and drags items. Imprecise movement can cause a dragging when the user just wants to select.
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 dealt with in Mac OS X
with the introduction of Exposé
.
to manipulate files (for example, copying them between disks or folders.). System 7
introduced the ability to open a document in an application by dropping the document icon onto the application's icon.
In System 7.5 drag-and-drop was extended 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.
In Mac OS X
, the user can install software without using a setup program. The application packaging scheme of OS X allows the program to simply copy any required support files upon startup.
For most of its history Mac OS has used a one button mouse 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.
was his shareware program called Aporia in 1988 under Windows 2.0, and later commercialized as WinTools. In Aporia/WinTools all icons had functions that could be obtained by double clicking the left mouse button, by clicking on the right mouse button, or by dragging onto one of several functional icons, such as printing, copying, viewing, and other actions. If an icon was double-clicked on and ran a program, the icon changed to indicate that a program was running, and if it was then dragged to the trash, the program was exited. (A defect in the implementation led to a workaround being built into the Windows operating system Aporia Bits)
Subsequently numerous other competitors provided drag & drop desktop replacements to the standard Windows interface including the Norton Desktop, Xerox, NewWave, and Central Point. In Windows 95
, Microsoft prevented developers from taking over the desktop, and released a drag & drop model of their own.
of OS/2
uses dragging and dropping extensively with the secondary mouse button, leaving the primary one for selection and clicking.
Its use like that of other advanced Common User Access
features distinguished native OS/2 applications from platform-independent ports.
Google's web-based e-mail application Gmail
supports drag-and-drop of images and attachments in the latest Google Chrome
browser and Apple's Safari
(5.x).
or Android home screens.
to a special trashcan icon
to delete a file
.
Further examples include:
Computer
A computer is a programmable machine designed to sequentially and automatically carry out a sequence of arithmetic or logical operations. The particular sequence of operations can be changed readily, allowing the computer to solve more than one kind of problem...
graphical user interface
Graphical user interface
In computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
s, drag-and-drop is the action of (or support for the action of) selecting a virtual object by "grabbing" it and dragging 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 abstract object
Abstract object
An abstract object is an object which does not exist at any particular time or place, but rather exists as a type of thing . In philosophy, an important distinction is whether an object is considered abstract or concrete. Abstract objects are sometimes called abstracta An abstract object is an...
s.
As a feature, support for drag-and-drop is not found in all software, though it is sometimes a fast and easy-to-learn technique for users to perform tasks. However, the lack of affordance
Affordance
An affordance is a quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling...
s in drag-and-drop implementations means that it is not always obvious that an item can be dragged.
Actions
The basic sequence involved in drag-and-drop is:- Press, and hold down, the button on the mouse or other pointing devicePointing deviceA pointing device is an input interface that allows a user to input spatial data to a computer...
, to "grab" the object, - "Drag" the object/cursorCursor (computers)In computing, a cursor is an indicator used to show the position on a computer monitor or other display device that will respond to input from a text input or pointing device. The flashing text cursor may be referred to as a caret in some cases...
/pointing devicePointing deviceA pointing device is an input interface that allows a user to input spatial data to a computer...
to the desired location, - "Drop" the object by releasing the button.
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 Fitts' law
Fitts' law
Fitts's law is a model of human movement primarily used in human–computer interaction and ergonomics that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target...
). 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.
A design problem appears when the same button selects and drags items. Imprecise movement can cause a dragging when the user just wants to select.
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 dealt with in Mac OS X
Mac OS X
Mac OS X is a series of Unix-based operating systems and graphical user interfaces developed, marketed, and sold by Apple Inc. Since 2002, has been included with all new Macintosh computer systems...
with the introduction of Exposé
Exposé (Mac OS X)
Exposé is a feature of the Mac OS X operating system. First previewed on 23 June 2003 at the Apple Worldwide Developers Conference as a feature of the then forthcoming Mac OS X v10.3, Exposé allows a user to quickly locate an open window, or to hide all windows and show the desktop without the need...
.
In Mac OS
Drag-and-drop was used in the original MacintoshMacintosh 128K
The Macintosh 128K machine, released as the "Apple Macintosh", was the original Apple Macintosh personal computer. Its beige case contained a monitor and came with a keyboard and mouse. An indentation in the top of the case made it easier for the computer to be lifted and carried. It had a selling...
to manipulate files (for example, copying them between disks or folders.). System 7
System 7
System 7 is the name of a Macintosh operating system introduced in 1991.System 7 may also refer to:* System 7 , a British dance/ambient band* System 7 , 1991 album* IBM System/7, a 1970s computer system...
introduced the ability to open a document in an application by dropping the document icon onto the application's icon.
In System 7.5 drag-and-drop was extended 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.
In Mac OS X
Mac OS X
Mac OS X is a series of Unix-based operating systems and graphical user interfaces developed, marketed, and sold by Apple Inc. Since 2002, has been included with all new Macintosh computer systems...
, the user can install software without using a setup program. The application packaging scheme of OS X allows the program to simply copy any required support files upon startup.
For most of its history Mac OS has used a one button mouse 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.
In Windows
Jeffrey Greenberg claims that the first drag & drop implementation for WindowsMicrosoft Windows
Microsoft Windows is a series of operating systems produced by Microsoft.Microsoft introduced an operating environment named Windows on November 20, 1985 as an add-on to MS-DOS in response to the growing interest in graphical user interfaces . Microsoft Windows came to dominate the world's personal...
was his shareware program called Aporia in 1988 under Windows 2.0, and later commercialized as WinTools. In Aporia/WinTools all icons had functions that could be obtained by double clicking the left mouse button, by clicking on the right mouse button, or by dragging onto one of several functional icons, such as printing, copying, viewing, and other actions. If an icon was double-clicked on and ran a program, the icon changed to indicate that a program was running, and if it was then dragged to the trash, the program was exited. (A defect in the implementation led to a workaround being built into the Windows operating system Aporia Bits)
Subsequently numerous other competitors provided drag & drop desktop replacements to the standard Windows interface including the Norton Desktop, Xerox, NewWave, and Central Point. In Windows 95
Windows 95
Windows 95 is a consumer-oriented graphical user interface-based operating system. It was released on August 24, 1995 by Microsoft, and was a significant progression from the company's previous Windows products...
, Microsoft prevented developers from taking over the desktop, and released a drag & drop model of their own.
In OS/2
The Workplace ShellWorkplace Shell
The Workplace Shell is a object-oriented desktop shell produced by IBM's Boca Raton development lab for OS/2 2.0. It is based on Common User Access and made a radical shift away from the Program Manager type interface that earlier versions of OS/2 shared with Windows 3.x or the...
of OS/2
OS/2
OS/2 is a computer operating system, initially created by Microsoft and IBM, then later developed by IBM exclusively. The name stands for "Operating System/2," because it was introduced as part of the same generation change release as IBM's "Personal System/2 " line of second-generation personal...
uses dragging and dropping extensively with the secondary mouse button, leaving the primary one for selection and clicking.
Its use like that of other advanced Common User Access
Common User Access
Common User Access is a standard for user interfaces to operating systems and computer programs. It was developed by IBM and first published in 1987 as part of their Systems Application Architecture...
features distinguished native OS/2 applications from platform-independent ports.
In HTML
The HTML5 specification is reported to include support for drag & drop.Google's web-based e-mail application Gmail
Gmail
Gmail is a free, advertising-supported email service provided by Google. Users may access Gmail as secure webmail, as well via POP3 or IMAP protocols. Gmail was launched as an invitation-only beta release on April 1, 2004 and it became available to the general public on February 7, 2007, though...
supports drag-and-drop of images and attachments in the latest Google Chrome
Google Chrome
Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...
browser and Apple's Safari
Safari (web browser)
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
(5.x).
On a touch screen
Very few touch screen interfaces include Click and drag. More common is long press, and then drag, e.g. on the iPhoneIPhone
The iPhone is a line of Internet and multimedia-enabled smartphones marketed by Apple Inc. The first iPhone was unveiled by Steve Jobs, then CEO of Apple, on January 9, 2007, and released on June 29, 2007...
or Android home screens.
In end-user programming
Drag-and-drop is considered an important program construction approach in many end-user development 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.Examples
A common example is dragging an icon on a virtual desktopDesktop environment
In graphical computing, a desktop environment commonly refers to a style of graphical user interface derived from the desktop metaphor that is seen on most modern personal computers. These GUIs help the user in easily accessing, configuring, and modifying many important and frequently accessed...
to a special trashcan icon
Icon (computing)
A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an...
to delete a file
Computer file
A computer file is a block of arbitrary information, or resource for storing information, which is available to a computer program and is usually based on some kind of durable storage. A file is durable in the sense that it remains available for programs to use after the current program has finished...
.
Further examples include:
- Dragging a data fileComputer fileA computer file is a block of arbitrary information, or resource for storing information, which is available to a computer program and is usually based on some kind of durable storage. A file is durable in the sense that it remains available for programs to use after the current program has finished...
onto a programComputer programA computer program is a sequence of instructions written to perform a specified task with a computer. A computer requires programs to function, typically executing the program's instructions in a central processor. The program has an executable form that the computer can use directly to execute...
iconIcon (computing)A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an...
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" - Moving or copying fileComputer fileA computer file is a block of arbitrary information, or resource for storing information, which is available to a computer program and is usually based on some kind of durable storage. A file is durable in the sense that it remains available for programs to use after the current program has finished...
s to a new location/directory/folder, - Adding objects to a list of objects to be processed,
- Rearranging widgetWidget (computing)In computer programming, a widget is an element of a graphical user interface that displays an information arrangement changeable by the user, such as a window or a text box. The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given...
s in a graphical user interfaceGraphical user interfaceIn computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
to customize their layout, - Dragging an attribute onto an object to which the command is to be applied,
- e.g. dragging a color onto a graphical object to change its color,
- Dragging a tool to a canvas location to apply the tool at that location,
- Creating a hyperlinkHyperlinkIn computing, a hyperlink is a reference to data that the reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks...
from one location or word to another location or document. - Most word processors allow dragging selected text from one point to another.
- JavaScript to drag-and-drop the list DOM nodes.
See also
- Mouse gestureMouse gestureIn computing, a pointing device gesture or mouse gesture is a way of combining pointing device movements and clicks which the software recognizes as a specific command. Pointing device gestures can provide quick access to common functions of a program. They can also be useful for people who have...
- Point-and-clickPoint-and-clickPoint-and-click is the action of a computer user moving a cursor to a certain location on a screen and then pressing a mouse button, usually the left button , or other pointing device...
- Snap (computer graphics)Snap (computer graphics)In computer graphics, snapping allows an object to be easily positioned in alignment with grid lines, guide lines or another object, by causing it to automatically jump to an exact position when the user drags it to the proximity of the desired location....