Cancelling drag-n-drop action before drop

Question

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.

Answer 1

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.

Undo/Redo

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

Escape

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.

Answer 2

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.