Question

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

空div | Img 1 | Img 2

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

空div | 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子句更新我的数据库，然后在sort sort上设置sortId。

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

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

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

Answer 1

而是使用sort(event, ui)，它会为您提供其他信息，例如已排序项目的新位置和原始位置。然后，您可以遍历数组，根据这些值重新分配位置索引。

http://api.jqueryui.com/sortable/#event-sort

<强>更新

道歉，似乎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

以下版本适用于多个项目，由类名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)
    }
});

请参阅my fiddle。

Jquery UI可排序检索Id和Sortposition

1 个答案: