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.
if we were over a valid drop location
show an animation of the drag image snapping back to its
point of origin to make it clear the drag was canceled.
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)