I have developed a UI as shown below:

enter image description here

Now I want to add a functionality to this UI that if user wants to exchange positions of if and else if blocks, he must be able to do that.

One option could be an up and down arrow icon next to each if and else if, to move the blocks up and down. What could be other better options?

  • 1
    Can an else if block be the first block? Otherwise, why would there be a need to move if blocks? (assuming that there only can be one, as the button only allows to create new else if blocks)
    – unor
    Commented Feb 27, 2014 at 11:46

6 Answers 6


I would suggest adding drag handles on each block and let the user decide the ordering. You'll only need to ensure that no matter the order of blocks, the first block will always be an if block and the remaining blocks- else if.

Refer the image for more details

enter image description here

This way the user will come to know upfront that the blocks are drag-able, both on desktop as well as mobile devices.


All other answers suggest drag handles, but I suggest against that.

The problem with drag handles is that:

  • you ask the user to move a block from one position to a specific area. If he misses the area, errors can easily occur.
  • if the block you're moving is too high, the travel distance can become cumbersome.
  • it can be hard to implement
  • drag handles suggest that the item can be moved anywhere, but in this case, there's only one target

Drag handles work well with a list of N items, where each of these item take up a small amount of space, and where each item could be moved anywhere within the list.

Switch, not drag

Here, you just want to switch positions, between 2 items. There is only 1 start position, and 1 target position. Just use a toggle button.


For example, Google Translate uses a double-arrow button to toggle between the source language and the destination language:

enter image description here

Here's Converbot:

enter image description here

Keep it simple

Don't give your users the illusion that can they can move items around anywhere with drag handles. Just have a single button that performs the single action of switching positions.

  • 3
    What if you have 10 else if's and you need to add another one, but this one needs to be placed at the top (for some reason). The screenshot suggests blocks can only be added at the bottom. In your case you'll have to press switch button 10 times. Dragging can also be done in grids, minimizing the chance for errors. You can even constrain movement to just the Y axis. Commented Feb 26, 2014 at 10:26
  • 1
    You're right. In that case, it would definitely make more sense to have some kind of drag behavior. But still, you would need to come up with a more condensed interface. If you have 10 of these blocks, you'll have to drag and scroll the page at the same time. Dragging works for example in GMail, because each email takes up 20-30 pixels in height. So, when dragging, you can see both the start point and the destination area.
    – jgthms
    Commented Feb 26, 2014 at 10:37
  • Collapsable blocks? Commented Feb 26, 2014 at 11:01
  • 1
    @Paul Spreadsheets software usually have a button "insert before current row". You could imagine having N add buttons instead of just one, and the problem doesn't exist any more. Commented Feb 26, 2014 at 13:19
  • I am of the same opinion as @Paul ! Commented Feb 26, 2014 at 14:51

Mailchimp uses and icon to indicate the draggability of the block.

enter image description here

Google uses drag handles in Gmail, they appear on hover.

enter image description here

Using an icon (any icon) or drag handles to indicate the object is draggable are both good solutions, but it all comes down to the affordance of the solutions. When showing it to your user, will they understand it's meaning? One way of solving that is by introducing the feature to new users. Which one to choose is up to you.

A third option is to set the cursor property to move on hover. This is by default a good thing to do and can be used in combination with the previous options. One note of advice with that is to only make part of the block draggable (just a handle) so users won't see the move cursor all the time when moving over the blocks. They still have to select and click stuff on the blocks. The move cursor might make the user believe they can't select the drop down boxes.


When I do lists of orderable elements, I try to avoid drag handles but only becuase they are fiddly with smaller UI elements in my case.

Instead I implement Move Up and Move Down buttons on buttons or a context area (or both).

The downside of directly replacing drag handles with buttons is that the user needs to reposition the mouse after each move action. Ideally, you want a selection mechanism to highlight (or 'check') the block(s) being moved and static buttons that appear when a block is selected.

enter image description here

Related buttons could also include Remove, Add Comment, Copy. A drag handle does not let you naturally add these actions in the same mechanism.


If I had to solve this problem, I would have combined two different ways to do it :

  • Enabling the user to drag blocks to change their position.
  • When one block is selected, using the arrows of the keyboard to change their position.

I think that it's interesting to combine different ways to do something, so you could also display the arrows you was speaking about on hover or if the block is selected although I don't think that this way to do it is as natural as dragging or using the keyboard.

  • I've noticed that you leave an 'im french' disclaimer on every answer. This is just noise on the answer and is not required. If there are grammar errors, we can usually tell you are not a native English speaker and that is OK! No apology is necessary :)
    – Gusdor
    Commented Feb 26, 2014 at 14:43
  • Thanks a lot @Gusdor ! I was in fact wondering if you guys could tell that I wasn't english or If you would have thought that I was a stupid guy who wouldn't know how to speak his own language ! Thanks again for your answer, I won't put that anymore then... Commented Feb 26, 2014 at 14:49
  • You are welcome. Your English is great btw. Errors are only a problem if it can't be understood - in that case some will ask you to clarify!
    – Gusdor
    Commented Feb 26, 2014 at 15:14

I would do as you suggested and use up / down arrows on the if blocks as well as the individual conditions in case the user wanted to swap any of those as well.

You can also make the arrows aware of their position by enabling / disabling them based on whether they can move their item up or down or not.

Based on your image, here's what it could look like:

enter image description here

Obviously, you could give the individual conditions a little more height so you can have larger arrows.


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.