Question

I’d like to use Script.aculo.us Sortable to sort elements of a horizontal list (let’s say some little boxes). The problem is that these boxes have to be separated from each other by another boxes of a different kind, which shouldn’t be movable, but they have to be always there in between these sortable boxes, one between each pair of movable boxes.

Let’s mark movable boxes by [M] and unmovable delimiters by [D]. Then the situation is as follows:

[M1][D][M2][D][M3][D][M4]

Now, when a user drags, for example, the [M2] movable box to the position of [M4], the situation should become as follows:

[M1][D][M3][D][M4][D][M2]

and when he moves the [M4] movable box into the [M2] position, the situation should be like below:

[M1][D][M3][D][M4][D][M2]

But the following settings are forbidden:

[M1][D][M3][M4][D][D][M2]
[M1][D][M4][D][M2][M3][D]

that is, no two delimiters should be near each other, and no delimiter should be left in front or at the end of the sequence.

How can I make something like that using Script.aculo.us Sortables? Is it possible at all?

Answer 1

I think I’ve figured a way to make it: It could be done by CSS rules.
I simply set the following rule for my list element:

li:before {
  content: "[D]";   /* my delimiter */
}

li:first-child:before {
  content: "";
}

This makes that all list elements but first will have [D] text attached before them in their container.

Now when I move around my list items (Draggables of a Sortable), the CSS keeps these delimiters updated: when I drag an element to the beginning of the list, it gains :fisrt-child pseudo-class, so it appears without the delimiter. At any other place in the list it lacks this pseudo-class, so the delimiter appears in front of it.

So looks like the problem is solved.