Draggable and Edditable - How to solve?

Question

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.

Possible scenarios:

1. Onmouseover those elements the cursor indicates drag and drop, edditing needs clicking.
2. 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.
3. 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?

Answer 1

The one thing to be careful about when mixing onMouseDown behaviors is that user may want to drag and select the text (to copy the text for instance).

So I think a better solution for you would be to keep the box interaction as just click to edit and have a drag icon on left/right which will allow the user to drag them. You could also do so that each of the boxes have a small header that can be grabbed and dragged.. kind of like how the windows in any OS work.

Answer 2

First scenario is good, additionally show affordances: "Click to edit" text and jitter behavior and draggable cursor, that indicates dragging ability, see the picture.