jQuery UI可排序-序列化多个列

我有一个小脚本，它允许我使用jQuery在3列之间很好地对div标记进行排序。jQuery可以在下面看到：

$(".column").sortable(
 { connectWith: '.column' },
 { update: function(event, ui) { alert($(this).sortable('serialize')) }
});

如果我将项目从第1列移动到第2列，它将显示2个警报，显示2个受影响列的序列化数据。问题是，我还需要知道列ID，以便最终将数据保存到数据库中。现在，如果可以只在警报中显示列id，但这就足以让我继续

$(".column").sortable(
  { connectWith: '.column' }, { update: function(event, ui) {
     alert($(this).sortable('serialize'));
     alert($(this).parents('.column').attr(id));
  }
});

我认为这应该行得通。查找已移动div的父列，然后获取其id属性。

使用“最近”方法使其工作：

{更新：函数（事件，ui）{ 警报（$（this）.closest（“div”）.attr（“id”）； 警报（$（this）.sortable（'serialize'））

---

}

刚刚用一个非常非常肮脏的把戏解决了这个问题。想和你分享一下，也许会有帮助

<div class="column" >
  <div class="portlet" id="portlet_1_name">
     <div class="portlet-header">Title1</div>
     <div class="portlet-content">Text</div>
  </div>
  <div class="portlet" id="portlet_2_name">
     <div class="portlet-header">Title2</div>
     <div class="portlet-content">Text</div>
  </div>
</div>
<!-- for debug -->
<div id="serial"></div>

---

我一直在寻找一个很好的答案，这里的答案都不是我想要的，所以我将分享我的做法：

$('ul.playerList').each(function() {
    var id = $(this).attr('id'); // get element id
    window[id] = $(this).sortable("serialize",{key:id}); // make global var w/ data
});

// you could make this more dynamic if you have a lot of lists
var data = ul_id_1 + "&" + ul_id_2 + "&" + ul_id_3 + "&action=other_vars"; 

$.post(url,data,function(resp) {
    $("#test").html(resp);
});

---

this.id

获取列id，不需要父项、属性等。

$('ul.playerList').each(function() {
    var id = $(this).attr('id'); // get element id
    window[id] = $(this).sortable("serialize",{key:id}); // make global var w/ data
});

// you could make this more dynamic if you have a lot of lists
var data = ul_id_1 + "&" + ul_id_2 + "&" + ul_id_3 + "&action=other_vars"; 

$.post(url,data,function(resp) {
    $("#test").html(resp);
});