Simple need to reorder things on a form at run-time

WEB TMS WEB Core
1

I'm looking for a simple way to rearrange some words/captions at run-time.

Analogous to rearranging tabs on a notebook.

Maybe a panel with four labels or buttons or smaller panels in it, and the user can re-order them by clicking and dragging.

More specifically, I want something like this:

+--------+--------+--------+
|        |   1    |        |
+--------+--------+--------+
|    2   |        |   4    |
+--------+--------+--------+
|        |    3   |        |
+--------+--------+--------+

I want the user to be able to change the positions of 1, 2, 3, and 4, but only in those four cells. The blank cells can't be used.

However, something like this is also ok:

+--------+--------+--------+--------+
|    N   |    E   |    S   |    W   |
+--------+--------+--------+--------+

where here you can drag the letters left and right.

(I don't know where the green color is coming from; ignore it.)

2

Some ideas.

  1. have each item shown as a combobox, where you can select which element appears. For example, the "1" would be an element in a dropdown where you can then select one of the other choices.

  2. similarly, have a popup window where you can select what goes where using a similar interface. This might work better if "1" or "N" is a more complex object like a card or a whole other thing that doesn't fit into a combobox.

  3. Use drag and drop to move things around. Can't say I've used "normal" drag and drop features all that much, but they're there and what I've tried seemed to work.

  4. Use a more complex drag and drop mechanism like InteractJS. This allows for more complex interactions. There's a blog post here about how to implement a number of common types of UIs, like a chessboard. It takes a bit of effort to work through it, but it ultimately shows how to do many of these things.

3

I'm using #1 right now. The problem is it needs logic to ensure you only pick one of each option. Having a slider where you only have the four letters or tokens, like N, E, S, and W, and all you can do is rearrange them in the order you want, then you don't have to worry about duplication.

VCL has some things like menu bars that let you rearrange things that way. I don't know if there's anything like that in any of the WEB Core component libs, which is why I'm asking.

4

Other suggestion:
Make this with TMS FNC Blox that can be used from TMS WEB Core: