Drag and drop
Drag and Drop , often also Drag & Drop or Drag'n'Drop , German " Drag and Drop " , or D&D for short , is a method for operating graphical user interfaces on computers by moving graphical elements using a pointing device . An element such as B. a pictogram can be drawn and released over a possible destination. This can be, for example, selected text or the symbol of a file. In general, drag and drop can be used to perform actions or create relationships between two abstract objects.
Basics
Originally, drag & drop was a visualization of copying and pasting (or cutting and pasting , i.e. moving) for various data elements - in contrast to this, it does not use the clipboard , but the buffers of commands close to the operating system.
As the most intuitive form of interaction with an ordinary PC, drag and drop quickly found its way into many personal computer applications . When and by whom drag and drop was invented is controversial. After the development of the desk metaphor at PARC , which sold the rights to Apple in the 1970s, Apple perfected the GUI for the human interface and also defined the human interface guideline for the first time as a specification for the design of user interfaces. Here are u. a. also describes the essential criteria for a good drag-and-drop implementation.
Today, drag & drop goes beyond moving data elements and, in addition to this aspect, also includes “throwing files onto programs” - it visualizes interprocess communication , for example call parameters of a program or the call of subroutines and modules within an application. The user does not need to worry about the syntax on which the action is based.
On a modern GUI of the common operating systems , most elements can generally be dragged onto others; the effect depends on the type of element and on whether you hold down the left or right mouse button (or the equivalent of other pointing devices) while dragging.
Visualization
With a complete implementation, the user receives immediate feedback at all significant points of a drag-and-drop operation:
- Highlight the element
- Visualization of dragging and leaving the place of origin
- Show a drop opportunity
- Feedback when dropping
Highlight the element
Since drag is defined as dragging with the mouse button pressed, the operation is always initiated by moving the mouse pointer over the object and pressing one of the buttons. A selection of the element is usually associated with the start of the drag-and-drop process. Only rarely do you come across the less practical option of having to click on the element to be dragged beforehand.
Dragging multiple objects is a special case. All of these must first be selected. Often this is done again by drag and drop with a so-called "rubber band" ( ribbon or marking rectangle , visualization replacement for pressed shift key ). Objects are selected within a rectangular area between the start and end point of the drag operation. Pressing the mouse button again over one of the selected elements initiates the dragging of all elements.
Pull
Complete drag-and-drop implementations provide visual feedback as soon as the user drags an element, i.e. moves the mouse while holding down the mouse button. To make it easier to find a target object while dragging, the dragged element is often shown semi-transparent so that the background shimmers through: It “divides” into the one at the original location and the dragged image of the selected element that moves with the cursor and so indicates the drag-and-drop option.
Display of a drop possibility
Often times, you can see which action is triggered by dragging an element. If the user drags an element over a possible drop target, this can be recognized by the dragged or "touched" element. If an element can be dragged into an area, this area is usually highlighted. Again, however, this does not happen if the user drives over a new drop opportunity within the area. Then it will be highlighted.
Most of the time, a drop option is highlighted by means of frames or color changes. In special cases, for example when arranging several elements, an insertion point is often displayed or a gap is created where the dragged element will be placed. When dragging a file onto a folder icon , small symbols can be used to indicate whether the file is simply being moved, copied or a link to the file is created.
Some applications allow hidden content to be opened and / or made visible if the user pauses the cursor for a moment on closed or semi-hidden objects, for example activating a window , including windows that are minimized with Autoraise.
If a drop on an element does not make sense (for example put a folder in itself), not only is there no highlighting, but an additional note in the form of a prohibition sign or the like appears next to the pointer. When dragging and dropping several elements, a drop option is usually only displayed if all dragged elements are suitable for the action to be performed.
Drop
After Drop (German release or drop it ) the user is almost always a feedback on the success of his action of an element.
After a successful drag and drop, the highlighting of the drop target disappears. If an element has been moved, it disappears from its previous place at the latest when the mouse button is released and appears in its new position. For longer-lasting actions, visualizations such as the hourglass or other progress indicators appear .
If drag and drop was not ended over any possible drop element or if the action with the dragged element does not make sense (see above), this is usually indicated by the fact that the symbols attached to the cursor “jump” back to their origin. If further settings or a confirmation are necessary, these appear after the drag and drop has been completed and before the action is carried out, for example as a dialog window .
Sometimes elements remain selected even after they have been successfully dragged and dropped, or several elements that have been released at the same time are moved in the order in which they were selected.
Areas of application
Drag and drop has established itself as the most intuitive operating option for the following commands:
- Dragging a file symbol (icon) onto a folder symbol to move, copy or create a link to the file
- Dragging selected text to restructure a document
- Dragging an icon onto a program icon or into a window to open or edit it
- Drag and drop to rearrange items in a bar or list
- Drag and drop an object to add it to a queue
- Moving image sections in image processing
- Fiddling with paths in a vector graphic
- GIS function of panning to move a map
- Moving a file symbol on the desktop to a website in order to initiate an upload command
Drag and drop on websites
As web applications and services increase, so do efforts to implement drag and drop in Internet sites . This is often only possible with client-side scripting languages such as JavaScript . Both browser manufacturers such as Microsoft with the dataTransfer Object and various web developers try to enable the development of intuitive web interfaces with drag and drop.
The first complete implementation in all common browsers was achieved by two German students with Virtos.net. The internet project was presented at Jugend forscht and was awarded the Konrad Zuse Youth Prize by the Eduard Rhein Foundation, among others .
In particular, the simultaneous dragging of different elements and the display of a drop option was only possible in individual browsers for a long time. This becomes important as soon as elements on the website are not only to be moved, but actions are to be triggered when the mouse is released. (see above ). With HTML5 an attempt is made for the first time to provide a standardized and native drag-and-drop functionality.
Web frameworks such as jQuery also provide a solution for full drag-and-drop actions.
Another variant of drag and drop into Web interfaces, the DHTML - API by Walter Zorn is this function library is available to other Web developers as part of the software license. LGPL for the free integration into your own projects available, but does not support display of Possibility to drop while dragging, which limits the application range of the programming interface .
Web links
- Drag and drop with C # / VB.NET
- Drag and drop with Java
- Drag and drop in HTML 5
- Overview of drag and drop in MSDN
Individual evidence
- ^ Human Interface Guideline ( Memento of May 14, 2008 in the Internet Archive ), developer.apple.com
- ↑ dataTransfer-Object , msdn.microsoft.com
- ↑ Virtos.net archived ( Memento from December 5, 2008 in the Internet Archive ), jugend-forscht.de
- ↑ Drag and Drop with HTML 5 (demo)
- ↑ DHTML-API , walterzorn.de