I'd like to use Script.aculo.us Sortable to sort elements开发者_JAVA技巧 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?
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 (Draggable
s 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.
精彩评论