Designing a drag and drop sortable that can sort its own contents and copy its children into another sortable

Question

I have this problem that's bothering me for a while.

I have an interface containing 2 or more sortables in a web app (sortables are controls where you can rearrange the child contents). Example: http://yuilibrary.com/yui/docs/sortable/simple-sortable.html

My mockup looks like this:

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

The menus sortables just behave like any standard sortable.

The problem is with the Pages sortable. For that sortable, you can rearrange the contents. Normally, the expected behaviour would be to click and hold down an item, remove the item from the original spot and show a place holder for the new place the item is to be inserted in.

However, in my case, this sortable also has a second purpose. If you are dragging an item from Pages into any one of the Menus, a copy of that item is made instead. Normally, if one were to do this, the original item in the pages sortable would be left alone and a copy is made and stuck to the cursor or finger.

Since my Pages sortable needs to allow for these 2 behaviours, I am not sure, how I should make these functionality apparent:

• You can reorder the pages inside the pages sortable.
• You can drag a copy of a page inside the pages sortable to a menu sortable.

I have considered styling the items inside pages like this:

^{download bmml source}

However, this can be a bit confusing:

• What happens if someone clicks the dotted area to drag it into a menu sortable and becomes confused when the item is locked to the pages sortable?
• What if the user clicks the non-dotted part and wants to reorder the page, but finds that a copy is made and he is unable to reorder?
• The fact that there isn't any visual indication that clicking the non-dotted part creates a copy is a minus as well.

Are there any patterns/examples in the wild of how this sort of sortable interaction can be achieved in a user-friendly and easily-discoverable way?

Answer 1

If possible, I would add a short but concise explanation at the top of the page explaining the process.

Additionally, or instead of, that depends on you, I would allow a free dragging of the object, but if the mouse crosses the vertical line separating both areas, I'd make a message appear telling the user that a copy is being generated and that the original will stay in place. That message should have to be on the empty area to the right, so it doesn't affect the dragging action.

Also, you can use what seems to be an status bar at the bottom of your design to show messages there and combine keys with the dragging action. For instance, ctrl + dragging creates a copy and that is explained at the bottom when the cursor hovers the item that can be moved or copies.

You can use the system of combining dragging and key press even if you don't use the status bar, just show the message in one of the empty areas but make it noticeable.

Answer 2

Drag and drop has a usability issue where it is a non-obvious feature (how users suppose to know you can drag items?), more so if the drop target is not the same as the source.

The principle solution for this is to include 'assists' - show labels revealing what can be dragged and where. In your case, you can add under the menus heading "drop pages here to add a link to a page".

In addition, consider upon drag start to animate the drop target. For instance, by animation their borders with a glow effect.