When dragging large elements - will an equally large placeholder hinder Usability?

Question

I am designing a Web Sortable (via D&D) Interface.

When you drag an element I would like to have the placeholder indicate where the element will be dropped. The problem is, if I want to move a large element down, the placeholder takes up too much space.

Of course it could be programmed so that when the element you are dragging reaches the bottom of the window, the window starts to scroll slowly.

However I am wondering if this could be a usability problem?

^{download bmml source – Wireframes created with Balsamiq Mockups}

The Alternative is to have placeholders which are just a line instead of as big as the element being dragged.

This creates a little bit of a jump on drag start and I dont really like it, but I am not sure if it isnt actually better for the users.

This is how it may look like:

^{download bmml source}

Which is the right approach, considering I have draggable/sortable elements with unknown heights and widths?

Answer 1

You want to provide a manoeuvrable control for dragging and dropping an item in the list. Making the list jump around due to place holders of the dragged item switching places will most probably be quite frustrating, plus the interface will also lack in scanability since you let the place holder occupy space between items where the user may not even intend to drop it (I mean that a large item being dragged down the list will have its place holder push later list objects down the list making it harder to scan).

Therefore I don't think it's a good idea to let the place holder be the size of the original item.

Your other suggestion (which you don't like) is better, but could in my meaning be improved. I think that instead of letting the place holder be "one row high" you indicate the drag marker in a different way. Don't make the indicator move the objects at all, make the list static in that it doesn't jump around when dragging.

You can take note on how Adobe does it when ordering layers in a document:

Answer 2

Dragging works well if all the interaction is within a screen. The reasons are:

1. A user need no a lot of physical movements and no scrolling, too.
2. All elements are observable, so there aren't hidden ones.

So if you have a lot of big elements, which are not fit the screen, drag and drop could create bad UX.

Still you can use a trick to observe all the elements in a screen and reduce physical movements at the same time. Just operate on a reduced copy of elements. This could not be exact copies, rather simplified and reduced representation. It could be shown constantly or just when needed, look at the image.