Javascript Jquery UI可排序检索Id和排序位置

让我解释一下我的情况： 我有3个位置可以保持图像。它们不必全部填满

空分区| Img 1 | Img 2

当我将Img 1更改为第二位时，它将是：

空分区| Img 2 | Img 1

Sortable可以很好地处理这个问题。但是我想把这个保存到数据库里。空div没有我要使用的ID或数据。我只想使用Img的数据。所以Img有一个data-imgId属性，或者我想用Javascript在数组中传递的东西

我希望在数组中添加“当前位置”和“数据imgId”。 大概是这样的：

Array
(
  [230] = 2
  [120] = 1
)

230和120是imageId，2和1是sortId。现在，我可以使用imageId上的where子句更新数据库，然后将sortId设置为良好排序

使用下一个代码，我可以检查移动的项目，但是“自动”移动的其他图像不会返回。如何解决此问题：

$( "#pages" ).sortable({
    helper: "clone",
    update: function(event, ui) {
        console.log($(ui.item).attr("id"));
        console.log($(ui.item).index() + 1);
    }
});

此代码返回被拖动对象的id和位置。但我还想检索另一个自动移动的图像id和新位置，以便我可以将其用于我的数据库？

而不是使用

排序（事件，ui）

，这将为您提供其他信息，例如排序项的新位置和原始位置。然后可以迭代数组，根据这些值重新分配位置索引

更新

抱歉，API似乎不再包含前后索引。相反，您可以同时使用

start（event，ui）

和

stop（event，ui）

事件，并使用

$（ui.item）.index（）记录前后索引。了解这些之后，您可以迭代原始数组，按索引位置排序，并相应地更新索引

更新2

试试这个：

$("#pages").sortable({
    stop: function(event, ui) {
        $("#pages > img").each(function(i, item) {
            var id = $(this).attr("id");
            array[id] = i;
        });
    });
});

更新3

以下修订版适用于多个项目，由classname
sort
初始化

var array = { One : {}, Two: {} };

$(".sort").sortable({
    stop: function(event, ui) {
        var id = $(this).attr("id");
        $(this).children().each(function(i, item) {
            var itemid = $(item).attr("id");
            array[id][itemid] = i;
        });
        console.log(array)
    }
});

请参阅。
但是使用该选项，我不知道“自动”排序图像中的sortId是什么？因为如果我用“old”sortId中的where子句更新数据库，它会将其设置为新的。但是如果我想更新另一个图像并用“old”sortId再次选择它，它有allready 2 sortId，因为第一个图像被设置为它？另一个问题Stumblor，如果我有两个类和页面呢。在那3个位置。所以他们必须分开工作。如果我改变第一个，那么它应该是1到3之间的顺序。但是如果我换了第二页。如果我和班级一起工作，它加起来等于1，2，3，4，5，6。但是我想要1，2，3和1，2，3。因为我使用的是唯一的imageId，所以这不是问题。我如何解决这个问题？你是说你在类上调用
.sortable
，即：
$（“.pages”）.sortable（{
）？是的，因为我有两个可以排序的块。这不是问题，你应该只引用
这个
，而不是访问目标项的子项。查看我的新更新。