Question

我想使用Script.aculo.us Sortable来排序水平列表的元素（让我们说一些小盒子）。问题是这些盒子必须通过另一种不同类型的盒子彼此分开，这些盒子不应该是可移动的，但它们必须始终位于这些可分类盒子之间，每对可移动盒子之间。 / p>

让我们按[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规则完成。
我只是为list元素设置了以下规则：

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

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

这使得所有列表元素首先在其容器中附加[D]文本。

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

看起来问题已经解决了。