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