I'm working on sortable tree component. Sorting and moving of leaves and branches is done using drag-n-drop. One of my users has pointed out that once you've started dragging an item you have to drop it somewhere in the tree even if you change you mind and don't actually want to change item's position. The only way to leave things intact is to drop the item exactly on it's former place.

Will it be enough to just "cancel the drop" when the item is dropped outside the tree? Is there any guidelines or examples for such functionality?

To get the idea of how it looks now, you can see this demo: http://dbushell.github.io/Nestable/. My tree works the same way.

2 Answers 2


There are a number of options that can ease this, as the onus should not be on the user to feel they have to go and drop it in its original position - assuming they can even remember where that might have been.


One is to provide an undo redo capability. This puts users much more at ease in that they know even if they do drop something somewhere where they don't want then they can just undo it right away.

It doesn't have to be a long and complicated undo history - even a simple 'Undo last action' would put users at ease.

Change cursor outside drop area

Another option is to change the cursor when the user moves the mouse somewhere that they can't normally drop.

Typically this is a 'forbidden' style of cursor, but that kind of puts people off dropping outside at all, so you could experiment with different cursors that indicate better that you can let go of the mouse and nothing will happen Something that indicates 'cancel drag'.


In many mainstream applications, users will be used to being able to press escape to cancel the drag operation.

You should provide that as a way out for users familiar with that. I notice your linked example does not allow escaping of the drop.

Drop safe zone

For users less familiar with drag and drop or who may not discover the undo mechanism, then when the drag operation starts you can show an area at one edge of the region which you can label 'Drop here to cancel the drag'.

This is a great 'just in time' mechanism as it's only displayed when the user has actually started a drag.

It makes it clear to the user without then even having to explore what happens when they go outside the droppable area, although in essence that is exactly what they are doing when they drop in your 'safe-zone'.

Use the original item space as the drop safe zone

An alternative to showing a special drop safe zone in a common location is to leave the space where the original item was dragged from rather than dynamically removing it and shuffling the tree. Typically a dotted line around the source position is enough and you could still label it 'Drop back here to cancel the drag'.

This does have the down side that the tree may have scrolled the original item out of view during the drag.

  • Thanks, Roger. I've also came across this answer suggesting to "show an animation of the drag image snapping back to its point of origin to make it clear the drag was canceled" which is nicely connects with your point to use original item space as a drop safe zone.
    – Troggy
    Commented Feb 5, 2014 at 20:34
  • 1
    I was just about to suggest allowing the users to Escape out of a drag/drop process. It makes perfect sense and there is nothing to be confused about. I mean, what happens when you're in a situation and you're in danger? You feel the need to escape! AHHHH!! ESCAPE!!!!!!!!!! Commented Feb 5, 2014 at 20:35
  • +1 Though I would say: copy exactly how the platform's main file browser does it. Ie Windows Explorer on Windows. If there are inconsistencies between platform's: pick the platform that most of your users are on. Commented Feb 6, 2014 at 15:29
  • @Marjan I agree with the sentiment... a bit :) But imagine if we always copied exactly what explorer does - instead of perhaps innovating and improving on it. It has to be said, with explorer, that sometimes I do worry mid-drag about how to prevent my file going somewhere I don't want. Escape is my exit route there, so yes copy that...but also we shouldn't necessarily stop there, but should think about other improvements over that. Commented Feb 6, 2014 at 15:43
  • 1
    Well yes of course :) improve away, but what you should not do is go against the platform... (as in not offering the platform's way of doing it) Sort of a Liskov Substitution Principle for UI/UX. Commented Feb 6, 2014 at 15:52

My opinion:

Drag and drop can be very useful, but it can also be troublesome for the very reason your user mentions. I'd do two things.

  1. confine the draggable region to only the list itself. That say, if a user drags outside of it and drops...
  2. it can be treated as a 'revert' action and dropping it outside of the hot area simply puts it back to where it was prior to the drag.
  • Yes, that exactly what I thought about. I was wondering if there is some established approach as I can't remember any working example of such drop cancel.
    – Troggy
    Commented Feb 5, 2014 at 20:40

Your Answer

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

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