Question

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

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

如果我将项目从第1列移动到第2列，它将显示2个警报，显示2个受影响列的序列化数据。问题是，我也需要知道列ID，所以我最终可以将数据保存到数据库中。现在，如果可以在警报中显示列ID，但这对我来说就足够了。

Answer 1

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

我认为这应该有效。找到你移动的div的父列，然后获取它的id属性。

Answer 2

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

<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>

等...

var out = "";

$('.portlet').each(function(index) {
   out += $(this).attr('id') + ',';
});

$("#serial").html(out);
// or alert(out) if you like

Answer 3

使用“最接近”的方法工作：

{update：function（event，ui）{ 警报（$（本）.closest（ “格”）ATTR（ “ID”））; 警报（$（本）.sortable（ '连载'）） }

Answer 4

我一直在寻找一个很好的答案，这里没有一个确实是我想要的，所以我将分享我的方式：

$('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);
});

jQuery UI Sortable - 序列化多个列

4 个答案: