What are the common idioms for the drop portion of a drag and drop operation?

Question

I'm only concerned here with the other half of a D%D operation, the drop. What are the common idioms to communicate to a user they can drop? And which are the "best" and in what situations?

In particular I would like to know ones that communicate something to the user both before the drag occurs and after the drag occurs. These can be visual or 'tactile' (mouse cursor changes).

Answer 1

• Indicate possible drop targets
• Show a live preview of the results
• Show what's being dragged in real-time

• If you can't drop something somewhere, explain why to the users in a popup near the cursor:

• Keep your drop targets big! Drag and drop is already an egregious violation of Fritz's law; no need to make it worse.

Answer 2

I have seen apps that show an outline where you can drop.

This is from the wordpress widget page

_{(source: srulytaber.com)}

Answer 3

A common approach is to turn the cursor into a "can't drop" cursor when you're over everything else.

The logic would be:

1. Start Drag.
2. Turn cursor into "can't drop".
3. While dragging check if over something that can accept the drop then turn cursor into "can drop".
4. Drop & reset cursor.

NOTE: I'm not necessarily advocating this, but it does show the user that they are in the middle of a drag/drop operation as well as indicating where the drop is valid.

Answer 4

You can slightly highlight the drop-locations as soon as the user is dragging an item. This way you can draw the attention to the drop-locations.

The prerequisite for this is of course that you show what's draggable in the first place. There this questions with answer for that.

Answer 5

Sometimes the drop target is within a set of linearly arranged objects. After the item is dropped, objects following the drop target will move to make space for the new object. In that case, the insertion point is typically indicated by a thin line between the two objects that will separate to make space.

For example, in almost any GUI that uses a mouse, text can be selected and dragged from one part of a document to another. The insertion point is indicated by a thin line between two characters.

That's also the case with the Netflix queue discussed earlier. In addition to a thin line, Netflix uses a black arrow to indicate where the movie will go.

 Thundercats: Season 1: Vol. 1: Disc 3     
 .....................................     
 Thundercats: Season 1: Vol. 1: Disc 4
>------------------------------------- 
 Thundercats: Season 1: Vol. 1: Disc 5
 .....................................
 Thundercats: Season 1: Vol. 1: Disc 6

(I can't figure out how to grab a screenshot while dragging.)

Answer 6

Typical workflow for dropping is:

repeat while mouse is down

    dragEnter -> mouse pointer has moved into some new area.
                 Highlight the area if the dragged data is valid for dropping into it,
                 adjust cursor (forbidden, copy, symlink, or move)
                 adjust the drag image (e.g. when dragging from icon view in file picker
                 to list view in another file picker, now's the time to animate the
                 drag image to look like the list view items would when dropped.

    dragLeave -> Undo any previous highlight.

end repeat

if we were over a valid drop location
    drop
else
    show an animation of the drag image snapping back to its
         point of origin to make it clear the drag was canceled.
end if

Undo any previous highlight.

Typical types of drop highlight are:

• Outline around a container (e.g. scroll view) to indicate something is a valid drop target
• Insertion marks to indicate which list items or text characters the item will be dropped in between, or after
• Selected variant of an icon (or "folded open" variant of e.g. a folder icon) to indicate a drop will end up inside an item, not before or after it.

Note that insertion marks are not just useful for lists where you can freely re-arrange item order, but also for sorted lists, where e.g. a drop between or on two files in a sorted list is perfectly valid, but you want to indicate that, after sorting, the file will show further down.

Just for completeness' sake, the typical workflow for dragging is:

detect whether a click-and-hold or click-and-move is really intended to be a drag:
 - Is it obvious? (e.g. dragging a file by its icon -- there is nothing else you can do
 - Or: Wait for a while, has the mouse moved by at least 4 pixels in some direction
       and has the mouse still not been released? (Accounts for most peoples' less-than-pefect motor skills
 - Or: Is the drag in a certain direction that doesn't make sense for anything else?
       (E.g. dragging sideways over text may be an attempt at a new selection,
       OTOH a vertical drag > 4px on a selection is pretty guaranteed to be a drag attempt.

Set up a drag image that is attached to the mouse. This image usually looks exactly
    like a 70% opaque version of the selection (giving the illusion you're moving
    the selection) and if you haven't moved the mouse yet, should invisibly overlay
    the actual selection. (I.e. move it relative to the mouse, don't center it
    under the mouse)

Start the drag! (following this we do the workflow for dropping)

(At least this is how drag'n drop usually happens in modern Mac OS X apps, though updating the drag image during a drop is a fairly new thing)