script.aculo.us 可使用分隔符排序

Question

我想使用 Script.aculo.us Sortable 对水平列表的元素进行排序（比如说一些小盒子）。问题在于，这些盒子必须由另一个不同类型的盒子相互隔开，这些盒子不应该是可移动的，但它们必须始终位于这些可分类盒子之间，每对可移动盒子之间有一个。

让我们用 [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] 文本。

现在，当我在列表项（Sortable 的 Draggable）中移动时，CSS 会更新这些分隔符：当我将一个元素拖动到列表的开头时，它会更新这些分隔符。获得 :fisrt-child 伪类，因此它显示时没有分隔符。在列表中的任何其他位置，它都缺少这个伪类，因此分隔符出现在它的前面。

所以看起来问题已经解决了。