Drag and Drop
Drag and drop, often also drag and drop or drag'n'drop, German " drag and drop ", short D & D, is a method for operating graphical user interfaces of computers by moving graphical elements using a pointer device. An item such as an icon can be dragged with it and released over a possible target. This may for example be selected text or icon of a file. In general, drag and drop can be used to perform actions or establish relationships between two abstract objects.
Basics
Originally drag and drop is a visualization of copy and paste (or cut and paste, so move) for various data elements - but in contrast, it does not use the clipboard, but the operating system buffer near commands.
As most intuitive form of interaction with an ordinary PC kept dragging and dropping rapidly moving into many applications of the personal computer. When and by whom was invented drag and drop, is controversial. After the development of the PARC desk metaphor, which sold the rights in the 1970s to Apple, Apple perfected the GUI for human interface and also defined the first time the Human Interface Guideline as a specification for the design of user interfaces. Herein, inter alia, also the essential criteria for a good drag-and -drop implementation are described.
Today, drag and drop goes beyond the movement of data elements and in addition to this aspect also includes the " pelting of programs with files " - here it visualized inter-process communication, ie about call parameters of a program or within an application calling subroutines and modules. The user needs to support syntax that is action based, do not worry.
In a modern GUI of the major operating systems, you can generally attract the most elements to others; the effect depends on the particular type thereof and the elements, whether you hold the left or right mouse button (or the equivalent in other pointing devices ) while dragging.
Visualization
A full implementation of the user is at all significant points of a drag-and- drop operation is immediate feedback:
- Selecting the element
- Visualization of the drawing, and leaving the place of origin
- Displaying a Drop - way
- Feedback when dropping
Selecting the element
Since drag is defined as dragging with the mouse button, the operation is always initiated by moving the mouse pointer to the object and pressing one of the keys. A selection of the element is usually associated with the beginning of the drag-and- drop operation. It is rare to come across the unpractical variant, the need to have to be drawn element previously extra- clicked.
A special case is dragging multiple objects. These must all first be selected. Often this is done again by drag and drop with a so-called "rubber band" ( or ribbon marking rectangle, visualization substitute for Shift key pressed down ). These objects are selected within a rectangular area between the start and end point of the selective drag operation. Pressing the mouse button over one of the selected elements initiates the drawing of all elements.
Pull
Full drag-and -drop implementations provide visual feedback when the user drags an item, so moving the mouse while holding down the mouse button. In order to facilitate the identification of a target object while dragging, the dragged element is often depicted semi-transparent, so that the base shines: it " tells " in that of the original location and the drawn image of the selected items, which moves together with the cursor and thus indicating the drag-and -drop option.
Display a drop- opportunity
It is often displayed what action triggers the dragging an item. When the user drags an item over a possible drop target, this is indicated by the solid or " touched " element. Can an item be pulled into an area, this area is usually highlighted. However, this is again not when the user runs over a new drop- possibility within the range. Then it is highlighted.
Most often the highlight of a drop chance by frame or color changes. In special cases, such as when arranging multiple elements an insertion point is often displayed or created a gap where the dragged item will be placed. When you drag a file onto a folder icon can be identified by means of small icons indicate whether the file just move, copy or link the file is created.
Some applications allow you to open and / or making visible of hidden content when the user move the cursor remains a moment in closed or semi- concealed objects, such as activating a window, even with Auto Raise minimized windows.
If a drop on an item do not make sense (for example, create folders in itself), so often remains not only a highlight, but it seems sometimes an additional indication in the form of a ban shield or similar next to the pointer. With drag-and -drop multiple items, it usually comes only to display a drop- resort and if all drawn elements for the action to be appropriate.
Drop ( release)
( Can be let go or fall German ) after the Drop an item the user will almost always provide feedback on the success of his action.
After successful drag and drop highlighting the drop target disappears. If an item is moved so it disappears with the latest release of the mouse button from its former place and appears in its new location. Visualizations seem like the hourglass or other progress indicators for prolonged action.
Has drag and drop terminated by any possible drop element or is the action with the drawn element does not make sense (see above) this is usually indicated by the fact that the stapled at the cursor symbols " bounce " back to its origin. If additional settings or confirmation be needed, so they will appear after completing the drag and drop and before execution of the action, such as a dialog box.
Sometimes elements remain even after successful Drag and Drop still selected, or multiple simultaneously unleashed elements according to the order of their selection postponed.
Applications
For the following commands to drag and drop has established itself as intuitive operating features:
- To copy, drag a file icon (icons) on a folder icon to move the file or create a shortcut
- Drag the selected text to restructure a document
- Drag an icon on a program icon or in a window to open it or edit
- To arrange drag and drop objects into a new bar or list
- Drag and drop an object to add it to a queue
- Move image in image editing
- Handling of paths of a vector graphic
- GIS function of the panning to move a map
- Moving a file icon on the desktop to an internet site to set an upload command in motion
Drag and drop to websites
With increasing emergence of Web applications and services make the efforts to implement drag and drop in web pages to. This is often only possible with client-side scripting languages such as JavaScript. Both browser makers such as Microsoft with the data transfer -Object as well as various web developer trying to develop intuitive web interface with drag and drop enable.
The first fully implemented in all major browsers succeeded two German students with Virtos.net. The Internet project was presented research at youth and awards include the Eduard Rhein Foundation with the Konrad -Zuse- Youth Award.
In particular, the simultaneous drawing of various elements and the display of a drop possibility was long available only in few browsers. This is important when elements on the page is not only shifted, but the actions to be triggered by releasing the mouse. (see above). HTML5 is the first attempt to provide a standardized and native drag-and- drop functionality.
Web frameworks like jQuery also provide a solution for full drag-and -drop actions.
Another variation of drag and drop in web interfaces, the DHTML API of Walter Zorn dar. This function library is available to other web developers in the software license LGPL for free integration into your own projects are available, but does not display the drop - way during drawing, which limits the application range of programming.