一页上有多个可独立排序的列表

Question

我的页面上有多个画廊，希望每个画廊都可以排序。图片应保留在每个画廊中。

<div class="sortable">
  <img src="foo.jpg" id="item-1">
  <img src="foo2.jpg" id="item-2">
  <img src="foo3.jpg" id="item-3">
</div>
<div class="sortable">
  <img src="foo_1.jpg" id="item-1">
  <img src="foo_12.jpg" id="item-2">
  <img src="foo_13.jpg" id="item-3">
</div>
<div class="sortable">
  <img src="bar.jpg" id="item-1">
  <img src="bar2.jpg" id="item-2">
  <img src="bar3.jpg" id="item-3">
</div>
<div class="sortable">
  <img src="bar_1.jpg" id="item-1">
  <img src="bar_12.jpg" id="item-2">
  <img src="bar_13.jpg" id="item-3">
</div>

我必须承认我不太擅长JQuery。我尝试"solve"这个问题如下：

$(".sortable").each(function() {
    $(this).sortable({
        update:function(event, ui) {
            var postData = $(this).sortable("serialize");
            //Code to post to PHP and insert into DB here
        }
    });
});

Answer 1

我会保留类，但是给每个div一个ID，然后，去这里看看jQuery：jQuery UI Sortable