WEB UI- DRAG and DROP

DRAG and DROP

 Drag and Drop has become a more familiar idiom on the Web.
 Drag and drop seems simple. Just grab an object and drop it
somewhere. What makes it challenging is that there are a lot
of events during drag and drop that can be used as
opportunities for feedback to the user.
 There are a number of individual states at which interaction is
possible. We call these microstates interesting moments. Eg:
• How will users know what is draggable?
• What does it mean to drag and drop an object?
• Where can you drop an object, and where is it not valid to drop
an object?
• What visual affordance will be used to indicate draggability?
 EVENTS
There are at least 15 events available for cueing the user during a drag and
drop interaction.
• Page Load: Before any interaction occurs, you can pre-signify the
availability of drag and drop.
• Mouse Hover: The mouse pointer hovers over an object that is draggable.
• Mouse Down: The user holds down the mouse button on the draggable
object.
• Drag Initiated: After the mouse drag starts (usually 3 pixels).
• Drag Leaves Original Location: After the drag object is pulled from its
location or object that contains it.
• Drag Re-Enters Original Location: When the object re-enters the original
location.
• Drag Enters Valid Target: Dragging over a valid drop target.
• Drag Enters Specific Invalid Target: Dragging over an invalid drop target.
 EVENTS

• Exits Valid Target: Dragging back out of a valid drop target.

• Drag Is Over No Specific Target: Dragging over neither a valid or invalid
target.
• Drag Hovers Over Valid Target: User pauses over the valid target without
dropping the object
• Drag Hovers Over Invalid Target: User pauses over an invalid target
without dropping the object.
• Drop Accepted: Drop occurs over a valid target and drop has been
accepted.
• Drop Rejected: Drop occurs over an invalid target and drop has been
rejected.
• Drop on Parent Container: Is the place where the object was dragged
from special?
 ACTORS

During each event you can visually manipulate a number

of actors.
 Page (e.g., static messaging on the page)
 Cursor
 Tool Tip
 Drag Object (or some portion of the drag object, e.g.,
title area of a module)
 Drag Object’s Parent Container
 Drop Target
 Interesting Moments Grid

• That’s 15 events times 6 actors. That means there are 90

possible interesting moments.
• The grid is a handy tool for planning out interesting moments
during a drag and drop interaction.
• It serves as a checklist to make sure there are no “holes” in
the interaction.
• Just place the actors along the left hand side and the
moments along the top.
• In the grid intersections, place the desired behaviors.
Interesting Moments Grid
 Purpose of Drag and Drop
It is useful for
 Drag and Drop Module
Rearranging modules on a page.
 Drag and Drop List
Rearranging lists.
 Drag and Drop Object
Changing relationships between objects.
 Drag and Drop Action
Invoking actions on a dropped object.
 Drag and Drop Collection
Maintaining collections through drag and drop.
Drag and Drop
Module
Normal display style
Modules are displayed
without an explicit cue for
drag and drop.

Invitation to drag
Moving the mouse to a
module’s header changes
the cursor to indicate that
the item is draggable.

Dragging
The module being moved
is dragged directly. A
ripped-out “hole” is
exposed where the
module was dragged from.
 Approaches for drop

While dragging, it is important to make it clear what will

happen when the user drops the dragged object. There are
two common approaches to targeting a drop:

 Placeholder target
 Insertion target
 Placeholder Target

• Uses a placeholder (hole with dashed outline) as the drop

target. The idea is to always position a hole in the spot where
the drop would occur.
• When module 1 starts dragging, it gets “ripped” out of the spot.
In its place is the placeholder target (dashed outline).
• As 1 gets dragged to the spot between 3 and 4, the placeholder
target jumps to fill in this spot as 4 moves out of the way.
 Insertion target

Keep the page as stable as possible and only move around an

insertion target (usually an insertion bar).
While the module is dragged, the page remains stable. No
modules move around. Instead, an insertion bar marks where
the module will be placed when dropped.
Unlike with the placeholder target, the dragged module 1 is
usually represented with a slightly transparent version of the
module (also known as ghosting).
When module 1 is dragged to the position between 3 and 4, an
insertion bar is placed there. This indicates that if 1 is dropped,
then 4 will slide down to open up the drop spot.
 Ghosting
• Keep the page as stable as possible and only move around an
insertion target (usually an insertion bar).
• While the module is dragged, the page remains stable. No
modules move around. Instead, an insertion bar marks where
the module will be placed when dropped.
• Unlike with the placeholder target, the dragged module 1 is
usually represented with a slightly transparent version of the
module (also known as ghosting).
• The transparency (ghosting) effect communicates that the
object being dragged is actually a representation of the
dragged object. It also keeps more of the page visible, thus
giving a clearer picture of the final result of a drop.
 Best Practices for Drag and Drop Module
 Use the placeholder approach when showing a clear
preview during drag is important.
 Use the insertion bar approach when you want to
avoid page jitter.
 Use the midpoint of the dragged object to determine
drag position.
 Use a slightly transparent version of the object being
dragged (ghost) instead of an opaque version.
 If you drag thumbnail representations, use the
insertion bar targeting approach.
The Drag and Drop List for rearranging items in a list

• Normal display state

List items are displayed without
any indication that the items can
be rearranged
• Invitation to drag
One of the in-context tools
revealed during mouse hover
shows a four-way arrow
indicating that the object can be
moved.
The Drag and Drop List for rearranging items in a list

• Dragging
Rearranging occurs in real
time. An empty slot is
exposed where the dragged
item will fit.
• Dropped
The item snaps into the new
location (where the hole
was opened up).
 Drag Lens

A drag lens provides a view

into a different part of the list
that can serve as a shortcut
target.
It could be a fixed area that is
always visible, or it could be a
miniature view of the list that
provides more rows for
targeting.
The lens will be made visible
only during dragging.
 Best Practices for Drag and Drop List
 If possible, drag the items in a list in real time using the
placeholder target approach.
 Use the mouse position for drag target positioning.
 If the goal is speed of dragging or if dragged items are
large, consider using the insertion target approach, as
rendering an insertion bar is inexpensive compared to
dynamically rearranging the list.
 Since drag and drop in lists is not easily discoverable,
consider providing an alternate way to rearrange the list.
 When the user rearranges the list with an alternate
method, use that moment for a onetime advertisement
for drag and drop.
 Drag and Drop Object

• Another common use for drag and drop is to change

relationships between objects. This is appropriate
when the relationships can be represented visually.
• Drag and Drop Object is used to rearrange members
of the organization
Drag and Drop Object
• Normal display state
An organizational chart
visually represents
relationships.

• Invitation to drag
When the mouse hovers
over a member of the
organization, the cursor
changes to show
draggability.
Drag and Drop Object
• Dragging
An insertion bar is used to
indicate where the
member will be inserted
when dropped.

• Dropped
When the dragged member
is dropped, the chart is
rearranged to
accommodate the new
location.
 Best Practices for Drag and Drop Object

 If objects are represented in a complex visual relationship, use insertion

targeting to indicate drop location (minimizes disturbing the page during
drag).
 For parent/child relationships, highlight the parent as well to indicate drop
location.
 If possible, reveal drag affordances on mouse hover to indicate
draggability.
 Initiate drag when the mouse is dragged three pixels or if the mouse is
held down for at least half a second.
 Position dragged objects directly in sync with the cursor. Offsetting will
make the drag feel disjointed.
 When hovering over a draggable object, change the cursor to indicate
draggability.
 Drag and Drop Action

• Drag and drop is also useful for invoking an action or

actions on a dropped object.
• Its most familiar example is dropping an item in the
trash to perform the delete action.
Drag and Drop Action
• Normal display state
Route is shown in dark purple.

• Invitation to drag
Hovering over any part of the
route provides a draggable circle
(route point) with a tool tip
saying “Drag to change route”.
Drag and Drop Action
• Dragging
We want to stay on the east side
of the bay and cross the San
Mateo bridge. Dragging the route
bubble back over the bridge will
reroute our trip.

• Dropped
The route changes as we drag.
Dropping completes the rerouting
action.
 Best Practices for Drag and Drop Action
 Use Drag and Drop Actions sparingly in web interfaces, as they
are not as discoverable or expected.
 Provide alternate ways to accomplish the action. Use the Drag
and Drop Action as a shortcut mechanism.
 Don’t use drag and drop for setting simple attributes. Instead
use a more direct approach to setting attributes on the object.
 Don’t construct an artificial visual representation for the sole
purpose of implementing drag and drop. Drag and drop
should follow the natural representation of the objects in the
interface.
 Provide clear invitations on hover to indicate the associated
action.
 Drag and Drop Collection

• A variation on dragging objects is collecting objects for

purchase, bookmarking, or saving into a temporary area.
• This type of interaction is called Drag and Drop Collection.
Drag and Drop Collection
• Normal display state
The shopping cart is docked
on the right part of the
screen.
• Invitation to drag
You can add to the cart with
the “+ cart” button or you
can drag the item to the
shopping cart. If you use the
button, the item flies to the
cart; the cart bumps open
and closed briefly to
indicate that the item has
been entered.
Drag and Drop Collection

• Dragging
The item gets a dragging
treatment.

• Dropped
The cart is populated with
the new item.
 Best Practices for Drag and Drop Collection
 Use as an alternate way to collect items (e.g., a shopping
cart).
 When a drag gets initiated, highlight the valid drop area to
hint where drop is available.
 Provide alternate cues that drag and drop into collections as
available.
 General Best Practices for Drag and Drop
 Keep page jitter to a minimum while dragging objects.
 Initiate dragging if the user presses the mouse down and
moves the mouse three pixels, or if she holds the mouse
down for at least half a second.
 Use drag and drop for performing direct actions as an
alternate method to more direct mechanisms in the interface.
 Hint at the availability of drag and drop when using
alternatives to drag and drop.
 Pay attention to all of the interesting moments during drag
and drop. Remember, you must keep the user informed
throughout the process.
 Use Invitations to cue the user that drag and drop is available.