[Contents] [Index] [Next] [Previous]

Designing Drag and Drop


By default, applications allow the user to drag text from just about everywhere and drop it into any writable Text component. If you want to use the features of drag and drop to and from other components in your application, you need to design these features into your application.

The most important decision you need to make in designing drag and drop into your applications is which elements you want to make draggable and which components you want to allow drops onto. When making this decision, keep in mind that drag and drop not only transfers data within an application but also between applications. Therefore you need to consider the impact of unfamiliar data being dropped into your application, and in which formats you want to allow your own application's data to be transferred out. The following subsections discuss the following other application considerations when designing drag and drop into your application:

Drag Icon Design

At the start of a drag operation, the pointer is replaced with a drag icon. The drag icon is defined by the application for each draggable element and can be composed of the following:

The source indicator should give a visual representation of the primary data type of the draggable element; for example, horizontal lines in a rectangle for representing text or a color palette for representing a color tool. All drag icons must include a source indicator. Move, copy, and link drag icons for graphics and textual information are shown below.

The operation indicator shows whether a drop will result in a move, copy, or link of the transferred data. Most drag icons should include an operation indicator, but an operation indicator should only be included in the drag icon when the result of the drop operation is a data transfer. The operation indicator can be shown either as a separate element of the drag icon or as a variation of the graphic used for the source indicator.

The state indicator shows whether the current pointer location is over a valid drop site for the dragged elements. The state indicator can show three different states:

All drag icons can include a state indicator. The state indicator should be coincident with the hotspot of the pointer. The state indicator can be a separate element in the drag icon or a change in the visual representation of the drag source.

When defining new drag icons for your application, you should follow the same rules as for defining any other new pointers described in Pointer Shapes.

Drag Source Effects

The source of the dragged elements can also provide visual indications of the result of a drop. For example, if the default operation for the dragged elements is a move, the source can be hidden or deemphasized; or, if the default operation of the dragged elements is a link, a line can be drawn from the source to the pointer.

Drag-Under Effects

A drag-under effect is a change to the visual state of a possible valid drop site when the drag icon pointer is over the drop site. All drop sites should use some kind of drag-under effect. Drop sites can use a solid line around the site, or a raised or lowered beveled edge around the drop site, as a drag-under effect. Drop sites can also change any visual component of the drop site, or even animate those changes, as a drag-under effect. For example, an icon representing a folder might show an animated image of the folder opening as a user drags a file onto it.

Providing Help on Drop Sites

Help on drag and drop operations should be provided by the drop site under the drag icon pointer at the time help is requested. If a drop site gets a help request during a drag and drop operation, the drop site application should post a DialogBox with help information about the results of a drop at that location and the choices for the completion of the drag and drop operation. The DialogBox should allow for canceling the drag and drop operation or dropping the elements at the current location as a move, copy, or link.

The drag and drop help DialogBox should be an Information DialogBox with a message describing the possible results of a drop at that location. The first button in the row of buttons at the bottom of the DialogBox should contain the default transfer option (Move, Copy, or Link) or OK for the single transfer action described in the text of the DialogBox. If the user has not specified a transfer option using modifier keys, and more than one is possible, then:

Drag and drop help DialogBoxes must contain a Cancel button for canceling the drag and drop operation in progress. The DialogBox can contain a Help button for providing further help on the DialogBox actions.

Determining Transfer Formats

After a drop operation, the application containing the drop site determines the best format to use to transfer the data, based on the data types that the drag source can send. The drop site can use any heuristic to determine this format.

If multiple transfer formats (in the case of links, multiple view formats) are acceptable in the drop site, the drop site application should let the user choose the correct transfer format either through a customization feature or through a DialogBox that lists the possible choices. The DialogBox should be a Question DialogBox asking the user to choose the best transfer format. The DialogBox must provide a choice of available transfer formats. The choice can be provided as a row of buttons along the bottom of the DialogBox, or in a RadioBox within the QuestionDialog. Using either method, there must be a Cancel button in the bottom row of buttons in the DialogBox. The DialogBox can also include a Help button that provides help on the results of a drop at the current location. If the DialogBox uses a RadioBox to present the format choices, the most likely format should be first and initially selected, formats that are currently invalid should be set insensitive, and the DialogBox must include an OK button in the bottom row of buttons for accepting the RadioBox choice. A Popup Menu can be used instead of a DialogBox to let the user choose the format.

Indicating Drop Failures

In most cases, the system indicates drop failure automatically. If your application allows partial success on transfers, it should post messages about partial failure that provide enough information for the user to recover from the failures.