jquery - 可排序的图像库

Question

我想使用 Jquery UI Sortable 创建一个可排序的图片库。直到这里，工作正常。

在每个标签内，我需要将每个图像的顺序存储在图库中。但是这个顺序必须在图像移动时更新。

示例：我有五个图像：

<ul id="sortable">
  <li id="1" value="1">image 1</li>
  <li id="2" value="2">image 2</li>
  <li id="3" value="3">image 3</li>
  <li id="4" value="4">image 4</li>
  <li id="5" value="5">image 5</li>
</ul>

如果我将图像 4 移动到图像 5 之后，则顺序值不应更改。也就是说，图像 5 的值为 4，图像 4 的值为 5。

这个有可能？

Answer 1

您可以在stop排序刚刚结束时更新事件中的值。像这样的东西：

$("#sortable").sortable({
    stop: function(event, ui) {
        $(this).children("li").each(function(index) {
            $(this).attr("value", index);
        });
    }
});

像这样，如果您想在重新加载后保留此显示，您可以将新值保存在服务器上。

编辑：通过marcelo2605更正设置索引的方式