Visual feedback for restricting drag and drop in a list

Question

I have a table with a list of items. Users are able to drag and drop each item up and down to reorder the items.

I want to set some control in place. For example, in the table below, I want to disable the user from dragging the item 'lime' before 'apple'.

I'm looking for visual examples of immediate feedback that indicates that you're not allowed to drag an item to somewhere, thank you!

DesignerAnalyst · Accepted Answer · 2016-10-11 05:23:51Z

2

When the user selects an item to drag, change the color of all valid positions to bright green, and invalid to dark red.

Additionally when the item is on top of an invalid position, you may display the following symbol :

And when on top of a valid position display the symbol :

answered Oct 11, 2016 at 5:23

DesignerAnalyst

7,7731 gold badge21 silver badges33 bronze badges

Add a comment |

Dipak · Accepted Answer · 2017-03-20 12:34:57Z

2

Create space for the element where user can drop:

answered Mar 20, 2017 at 12:34

Dipak

16.3k6 gold badges46 silver badges51 bronze badges

Add a comment |

Alvaro · Accepted Answer · 2017-03-20 12:13:29Z

1

Two ideas:

When the user is dragging the lime and is going to pass over the apple, the lime pushes the apple on its way. The same would happen the other way round (when the apple goes down).
Display all the possible locations of the item when the user starts dragging the item (in the image example it would be the lime):

answered Oct 12, 2016 at 21:38

Alvaro

16.9k7 gold badges45 silver badges68 bronze badges

Add a comment |