12

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).

6 Answers 6

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

alt text

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

alt text

  • Keep your drop targets big! Drag and drop is already an egregious violation of Fritz's law; no need to make it worse.
3
  • 1
    ooohhhh.... pictures!
    – shemnon
    Aug 16, 2010 at 20:42
  • 1
    o-oh... broken picture :(
    – awe
    Oct 6, 2011 at 7:57
  • 1
    You mean Fitts' Law?
    – Muers
    Jan 7, 2013 at 18:55
10

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

This is from the wordpress widget page

Wordpress widget page
(source: srulytaber.com)

7

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.

3
  • 3
    Normally there's a default cursor and either a "can drop" or "can't drop" cursor. I think the "can drop" cursor is better. Positive reinforcement. :-) Aug 13, 2010 at 2:46
  • Yup, this is standard, but that cursor is really offensive to me. Showing it right away might be even worse, since it tells the user they've done something wrong as soon as they click. Aug 14, 2010 at 1:18
  • @Robert - I was just pointing out a common idiom ;)
    – ChrisF
    Aug 14, 2010 at 15:35
5

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.

2
  • I generally do the same but use a dashed line around the place holder location. I highlight whichever drop zone is closest to the element being dragged. As you move the element around, you highlight which ever drop zone is closest. Aug 12, 2010 at 19:19
  • And that comment is what happens when you are typing while having a conversation. Anyway, I meant exactly what Sruly has a image of. I like to make the placeholder (which has the border) the same size as the element being dragged. This way the user can see how the page will be laid out before they drop. Aug 13, 2010 at 2:37
3

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.)

1
  • 1
    If you're using a Mac, I recommend Captur -- you can have it take a screenshot after a timed delay. No affiliation, just thought it'd be helpful :)
    – Muers
    Jan 7, 2013 at 18:58
2

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.