2

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!

enter image description here

2

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

enter image description here

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

enter image description here

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

enter image description here

2

Create space for the element where user can drop:

enter image description here

Use red border with blocked icon where user can't drop

enter image description here

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

Second idea

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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