Drag and drop

Last updated

An image being dragged onto a web browser icon, which opens the image in the web browser Drag and drop example.gif
An image being dragged onto a web browser icon, which opens the image in the web browser

In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects 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 objects.

Contents

As a feature, drag-and-drop support is not found in all software, 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. [1]

Actions

The basic sequence involved in drag and drop is:

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. [2] 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 an attempt to select an object to register as a dragging motion.

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é.

In Mac OS

Drag and drop, called click and drag at the time, was used in the original Macintosh to manipulate files (for example, copying them between disks [3] or folders [4] ). System 7 added the ability to open a document in an application by dropping the document icon onto the application's icon.

Apple added "Macintosh Drag and Drop" to System 7.5, 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.

For most of its history Mac OS has used a single 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 OS/2

The Workplace Shell 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.

In HTML

The HTML5 working draft specification includes support for drag and drop. [5] HTML5 supports different kinds of dragging and dropping features including:

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.

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). Google Images permits users to drag and drop image files into a browser to perform a reverse image search.

On a touch screen

Touch screen interfaces also include drag and drop, or more precisely, long press, and then drag, e.g. on the iPhone or Android home screens.

iOS 11 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 iPads. [6] On iPhones, the functionality is only available within the same app that the user started the drag. [7]

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. AgentSheets, [8] 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 Blender. [9] Drag and drop also features in some video game engines, including Unreal Engine, GameMaker Studio, Construct 2 and, with expansion, Unity.

Examples

A common example is dragging an icon on a virtual desktop to a special trashcan icon to delete a file.

Further examples include:

See also

Related Research Articles

<span class="mw-page-title-main">Context menu</span> User interface element

A context menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application to which the menu belongs. Usually the available choices are actions related to the selected object. From a technical point of view, such a context menu is a graphical control element.

<span class="mw-page-title-main">History of the graphical user interface</span>

The history of the graphical user interface, understood as the use of graphic icons and a pointing device to control a computer, covers a five-decade span of incremental refinements, built on some constant core principles. Several vendors have created their own windowing systems based on independent code, but with basic elements in common that define the WIMP "window, icon, menu and pointing device" paradigm.

AppleScript is a scripting language created by Apple Inc. that facilitates automated control over scriptable Mac applications. First introduced in System 7, it is currently included in all versions of macOS as part of a package of system automation tools. The term "AppleScript" may refer to the language itself, to an individual script written in the language, or, informally, to the macOS Open Scripting Architecture that underlies the language.

<span class="mw-page-title-main">Scrollbar</span> Graphical user interface element

A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction on a computer display, window, or viewport so that all of the content can be viewed, even if only a fraction of the content can be seen on a device's screen at one time. It offers a solution to the problem of navigation to a known or unknown location within a two-dimensional information space. It was also known as a handle in the very first GUIs. They are present in a wide range of electronic devices including computers, graphing calculators, mobile phones, and portable media players. The user interacts with the scrollbar elements using some method of direct action, the scrollbar translates that action into scrolling commands, and the user receives feedback through a visual updating of both the scrollbar elements and the scrolled content.

Cut, copy, and paste are essential commands of modern human–computer interaction and user interface design. They offer an interprocess communication technique for transferring data through a computer's user interface. The cut command removes the selected data from its original position, and the copy command creates a duplicate; in both cases the selected data is kept in temporary storage called the clipboard. Clipboard data is later inserted wherever a paste command is issued. The data remains available to any application supporting the feature, thus allowing easy data transfer between applications.

In computing, a window is a graphical control element. It consists of a visual area containing some of the graphical user interface of the program it belongs to and is framed by a window decoration. It usually has a rectangular shape that can overlap with the area of other windows. It displays the output of and may allow input to one or more processes.

The Dock is a prominent feature of the graphical user interface of macOS. It is used to launch applications and to switch between running applications. The Dock is also a prominent feature of macOS's predecessor NeXTSTEP and OPENSTEP operating systems. The earliest known implementations of a dock are found in operating systems such as RISC OS and NeXTSTEP. iOS has its own version of the Dock for the iPhone and iPod Touch, as does iPadOS for the iPad.

In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents. It can serve as an electronic hyperlink or file shortcut to access the program or data. The user can activate an icon using a mouse, pointer, finger, or voice commands. Their placement on the screen, also in relation to other icons, may provide further information to the user about their usage. In activating an icon, the user can move directly into and out of the identified function without knowing anything further about the location or requirements of the file or code.

Point and click are one of the actions of a computer user moving a pointer to a certain location on a screen (pointing) and then pressing a button on a mouse or other pointing device (click). An example of point and click is in hypermedia, where users click on hyperlinks to navigate from document to document. User interfaces, for example graphical user interfaces, are sometimes described as "point-and-click interfaces", often to suggest that they are very easy to use, requiring that the user simply point to indicate their wishes. Describing software this way implies that the interface can be controlled solely through a pointing device with little or no input from the keyboard, as with many graphical user interfaces.

The taskbar is a graphical user interface element that has been part of Microsoft Windows since Windows 95, displaying and facilitating switching between running programs. The taskbar and the associated Start Menu were created and named in 1993 by Daniel Oran, a program manager at Microsoft who had previously collaborated on great ape language research with the behavioral psychologist B.F. Skinner at Harvard.

<span class="mw-page-title-main">Visual programming language</span> Programming language written graphically by a user

In computing, a visual programming language, also known as diagrammatic programming, graphical programming or block coding, is a programming language that lets users create programs by manipulating program elements graphically rather than by specifying them textually. A VPL allows programming with visual expressions, spatial arrangements of text and graphic symbols, used either as elements of syntax or secondary notation. For example, many VPLs are based on the idea of "boxes and arrows", where boxes or other screen objects are treated as entities, connected by arrows, lines or arcs which represent relations. VPLs are generally the basis of low-code development platforms.

<span class="mw-page-title-main">Graphical widget</span> Element of interaction in a graphical user interface

A graphical widget in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, Qt, GTK, and Cocoa, contain a collection of controls and the logic to render these.

In human–computer interaction, a cursor is an indicator used to show the current position on a computer monitor or other display device that will respond to input, such as a text cursor or a mouse pointer.

<span class="mw-page-title-main">Menu bar</span> Graphical control element

A menu bar is a graphical control element which contains drop-down menus.

<span class="mw-page-title-main">Tree view</span>

A tree view is a graphical widget within a graphical user interface (GUI) in which users can navigate and interact intuitively with concise, hierarchical data presented as nodes in a tree-like format. It can also be called an outline view.

The Windows shell is the graphical user interface for the Microsoft Windows operating system. Its readily identifiable elements consist of the desktop, the taskbar, the Start menu, the task switcher and the AutoPlay feature. On some versions of Windows, it also includes Flip 3D and the charms. In Windows 10, the Windows Shell Experience Host interface drives visuals like the Start Menu, Action Center, Taskbar, and Task View/Timeline. However, the Windows shell also implements a shell namespace that enables computer programs running on Windows to access the computer's resources via the hierarchy of shell objects. "Desktop" is the top object of the hierarchy; below it there are a number of files and folders stored on the disk, as well as a number of special folders whose contents are either virtual or dynamically created. Recycle Bin, Libraries, Control Panel, This PC and Network are examples of such shell objects.

<span class="mw-page-title-main">Workbench (AmigaOS)</span> Graphical user interface for the Amiga computer

Workbench is the desktop environment and graphical file manager of AmigaOS developed by Commodore International for their Amiga line of computers. Workbench provides the user with a graphical interface to work with file systems and launch applications. It uses a workbench metaphor for representing file system organisation.

<span class="mw-page-title-main">Mouse button</span> Electric switch on a computer mouse

A mouse button is an electric switch on a computer mouse which can be pressed (“clicked”) to select or interact with an element of a graphical user interface. Mouse buttons are most commonly implemented as miniature snap-action switches.

In computing, the icon bar is the name of the dock in Acorn's RISC OS operating system, and is fundamental to the OS. Its introduction in 1987 was a new concept in GUIs. It displays icons through which access is provided to all parts of the computer that a typical user will require, from physical devices and system utilities to running applications, and will usually be their starting point for interacting with the system once it has finished booting.

References

  1. ↑ Jakob Nielsen, "Top-10 Application-Design Mistakes," http://www.useit.com/alertbox/application-mistakes.html (19 February 2008).
  2. ↑ Buxton, W. (1986). "Chunking and Phrasing and the Design of Human-Computer Dialogues". Proceedings of the IFIP World Computer Congress. pp. 475–480. Archived from the original on 7 June 2004.
  3. ↑ "Disk Swapper's Elbow". folklore.org.
  4. ↑ "The Grand Unified Model (2): The Finder". folklore.org.
  5. ↑ "HTML5 W3C Working Draft". w3.org.
  6. ↑ "iPad Drag and Drop, Multitasking, and Split View in iOS 11: Everything you need to know!". iMore. Retrieved 10 October 2017.
  7. ↑ Vincent, James (7 June 2017). "The iPhone is also getting drag and drop with iOS 11". The Verge. Retrieved 23 June 2017.
  8. ↑ "Moving Beyond Syntax: Lessons from 20 Years of Blocks Programing in AgentSheets" (PDF). Journal of Visual Languages and Sentient Systems. Archived from the original (PDF) on 28 April 2019. Retrieved 29 November 2018.
  9. ↑ "Render – Blender Reference Manual". blender.org. Archived from the original on 23 March 2015. Retrieved 24 January 2014.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.