User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
up vote 3 down vote accepted

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.

share|improve this answer

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

share|improve this answer
That looks like a nice solution! What did you use to make the demo? – user1721135 Jul 26 '13 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. – Alexey Kolchenko Jul 26 '13 at 22:29
I am currently using paint for this sort of thing heh. For final demo a real html/js prototype. – user1721135 Jul 26 '13 at 22:37
Paint is pain for such things ). – Alexey Kolchenko Jul 26 '13 at 22:43

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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