script.aculo.us Сортируется с разделителями

Question

Я бы хотел использовать Script.aculo.us Sortable для сортировки элементов горизонтального списка (скажем, несколько маленьких прямоугольников).Проблема заключается в том, что эти ящики должны быть отделены друг от друга другими ящиками другого типа, которые не должны быть подвижными, но они всегда должны быть между этими сортируемыми ящиками, по одному между каждой парой подвижных ящиков.1001 *

Отметим подвижные коробки [M] и неподвижные разделители [D].Тогда ситуация выглядит следующим образом:

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

Теперь, когда пользователь перетаскивает, например, подвижную коробку [M2] в положение [M4], ситуация должна выглядеть следующим образом:

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

и когда он перемещает подвижную коробку [M4] в положение [M2], ситуация должна выглядеть примерно так:

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

Но следующие настройки запрещены:

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

, то есть никакие два разделителя не должны быть рядом друг с другом, и не должно быть разделителя перед или в конце последовательности.

Как я могу сделать что-то подобное, используя Script.aculo.us Sortables?Возможно ли это вообще?

Answer 1

Думаю, я нашел способ сделать это: это можно сделать с помощью правил CSS .Я просто установил следующее правило для моего элемента списка:

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

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

Это означает, что все элементы списка, кроме первого, будут иметь текст [D], прикрепленный перед ними в своем контейнере.

Теперь, когда яперемещая мои элементы списка (Draggable s из Sortable), CSS сохраняет эти разделители обновленными: когда я перетаскиваю элемент в начало списка, он получает :fisrt-child псевдокласс, поэтому он появляется безразделитель.В любом другом месте списка отсутствует этот псевдокласс, поэтому перед ним появляется разделитель.

Похоже, проблема решена.