I have elements on a web app im designing. Its sort of a WYSIWYG thing for a CMS.
The elements are boxes. There are different types of boxes, or "micro templates" as I call them.
One is a heading for example. The other is a paragraph. There can be many of those elements arranged below each other.
On click those elements can be edited. But those elements can also be sorted via drag and drop vertically.
What is a good way to solve this dual functionality from an UX perspective?
I see several scenarios and have no idea, which would be best, or if there is a better way.
- Onmouseover those elements the cursor indicates drag and drop, edditing needs clicking.
- Onmouseover the cursor indicates editing, the user only clicks once to edit, but for drag and drop a specific part of the element needs to be dragged for the drag and drop to work.
- Onmouseover drag and drop functionality is communicated, for edditing an edit button must be clicked (eg a pencil at the top right corner).
Which one is best or is there an established different way to handle this?