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?

2 Answers 2


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.


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

  • That looks like a nice solution! What did you use to make the demo? Jul 26, 2013 at 22:21
  • It's just an animated GIF, any supporting editor could be used. I use Xara Designer. Live demo could be easily implemented with jQuery. Jul 26, 2013 at 22:29
  • I am currently using paint for this sort of thing heh. For final demo a real html/js prototype. Jul 26, 2013 at 22:37
  • Paint is pain for such things ). Jul 26, 2013 at 22:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.