Design and Layout:Interaction:Drag and Drop

From KDE-HIG_Wiki

Drag and drop is a direct manipulation technique, where you perform actions on selected objects by moving them around the screen with the mouse. You drag an object by clicking it, then holding the button while you move the pointer to the object's target location. The object is dropped at that location by releasing the mouse button.

Guidelines

When to apply

• Where the user can reasonably guess what the effect might be, provide drag and drop as an alternative way of interaction for the following actions:
  • Moving, copying and linking objects,
  • performing an action on objects by dropping them onto an icon representing the action, e.g. trash or printer icon,
  • opening a file by dragging it to the application or application icon.
• Make sure drag and drop is only an alternative to the menu and keyboard shortcuts.
• Every drag and drop operation can be reverted by using the application's undo function.

Dragging from one container to another

• See Implementation Suggestions for default drop actions.
• Note that dragging objects from one container to another is not always appropriate. For example, in a word processor, you can drag an image only inside the current document, not to another document. You can, however, drag the iconized representation of the image in the object browser and drop it in another document.
• When dragging an object to another application, copy it. Never move it to avoid any confusion about which application's undo function reverses the operation.

Operation feedback

An iconized translucent representation of the dragged object.

A miniature representation of the dragged object. It could be optimized by making it translucent.

• Provide visual feedback throughout the drag operation:
  • Change the mouse pointer to display drop operations when moving over possible targets (forbidden, copy, move, link).
  • Provide an iconized or miniature representation of the dragged object. Keep this representation small or make it translucent.
  • Highlight possible targets when moving over them.

Default drop action

• When there are multiple actions that may occur on drop (e.g. copy, move, link), make the most frequently used action the default drop action.
• When two or more actions are equally important to the user, provide a pop-up menu on drop. Unless an option is chosen in this menu, no action is performed.

Cancelling a drag and drop operation

• Allow the user to cancel a drag and drop operation by all of these methods:
  • Pressing Esc before releasing the mouse button,
  • dropping the object back on its original location,
  • dropping the object on an invalid drop target,
  • selecting Cancel on the pop-up menu.

Implementation Suggestions

Default drop actions:

Accessibility Notes

See Also

Related To

Keywords