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

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。我试图解决＆＃34;这个问题如下：

$(".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