Best Practice · Last modified July 15, 2009
Bookmark this on Delicious
Use visual style to indicate valid candidate drop sites during a drag and drop operation.
A second, distinct visual style choice should be used to indicated that a drop is allowed or disallowed when a dragged object is hovering over a specific target site.
For example, lightly highlight targets as passive indicators of Drop Invitation and brightly highlight targets for Drop Allowed/Drop Disallowed when hovered over.
What Problem Does This Solve?
Designer needs to indicate valid candidate drop sites during a drag and drop operation.
When to Use This Pattern
- Clarifying a Drag and Drop operation.
- The object is first selected or when the drag starts.
- The available drop sites can change depending on the value of the dragged object (for example: dragging a hotel reservation on a trip calendar might be constrained to the days there are vacancy and therefore the calendar will only provide drop invitations to the days that are valid.)
- There are multiple drop sites that are available and in order to clarify what is available, drop invitiations are provided for those drop sites (for example, a photo can be dragged to a photo album and when photo is selected, a drop invitation can be placed on the album.)
Drop Invitation is for showing the only legal places an object can be dropped.
What's the Solution?
- Use visual style to indicate that an area is available for dropping the object.
- The visual style should be different than Drop Allowed/Drop Disallowed which cues the user the drop will happen here. One example is to lightly highlight for Drop Invitation and brightly highlight for Drop Allowed/Drop Disallowe.
Why Use This Pattern?
If multiple choices are available or if the object can be dropped into a collection that may be rejected based on the object's state then a Drop Invitation guides the user and prevents errors.
For more information, see the rationale for Invitation patterns.
- When highlighting Drag and Drop destinations, pick colors carefully avoiding strange color combinations and/or lack of contrast. Good contrasting color combinations can help those with limited sight to find targets much easier. Possibly allow users to configure their own selection of colors for future use.
- See the general discussion about accessibility for Invitation patterns.