Jquery sortable/serialize with sortable and connect with答案

【问题标题】：Jquery sortable/serialize with sortable and connect withJquery sortable/serialize with sortable and connect with
【发布时间】：2012-06-22 15:19:59
【问题描述】：

大家好，我对 jquery 和 ajax 非常陌生，我正在寻找有关如何正确执行此操作的建议。

我有一个使用可排序的 div，以便我可以根据需要安排事情。它看起来像：

$('#resource-detail-content).sortable({

然后在我的 ajax 数据中我有类似的东西：

data: $('#resource-detail-content').sortable('serialize'),

效果很好，但分解数据是有意义的，我将 div 分成两个单独的 div，并使用 connectWith 允许在两者之间拖动内容：

$('#resource-detail-content,#resource-detail-content2').sortable({
  connectWith: '#resource-detail-content,#resource-detail-content2',

我现在想弄清楚的是如何在我的 ajax put 中发送两个 div 的数据。我尝试了明显的：

data: $('#resource-detail-content, #resource-detail-content2').sortable('serialize'),

但没有运气。我非常感谢任何帮助。

干杯，肖恩

【问题讨论】：

标签： jquery ajax

【解决方案1】：

首先你应该使用类而不是 ID，这样会更灵活。

我认为问题在于您有 2 个对象，每次调用后数据内容都会被覆盖。

你应该使用一个函数，像这样：

    data : getContent(),

    function getContent() {
        var data = "";

        $(".resource-detail-content").each(function(){
        if (data == "")    
           data += $(this).serialize();
        else 
           data += "&" + $(this).serialize();

        });
       return data;
    }

【讨论】：

所以，就我而言，我想要这样的东西： $(".resource-detail-content,.resource-detail-content2").each(function(){ ... ?
Nop, this: $(".resource-detail-content") 或 this $("#resource-detail-content, #resource-detail-content2") 对于第一个示例 html 将是:

你明白了吗？
还没有，我需要重新处理所有 sortable 和 connectWith 代码。
.serialize() 今天应该是 .sortable("serialize")。

【解决方案2】：

有一种更简单的方法可以做到这一点。我使用了 jQuery UI 示例中的 portlet，但我只有一列而不是三列：http://jqueryui.com/sortable/#portlets

我想序列化所有的 portlet。所以这是我的代码：

update: function (event, ui) {
    var data = $(this).sortable('serialize', {
        "attribute": "data-sort"
    });
}

第二个参数中的attribute 键更改了搜索特殊data-sort 属性的行为，该属性的格式应如下所示：

<div class="portlet" data-sort="id=<?php echo $faq['Faq']['id']; ?>">
    <div class="portlet-header"><?php echo h($faq['Faq']['title']); ?></div>
    <div class="portlet-content"><?php echo h($faq['Faq']['body']); ?></div>
</div>

在 HTML 中，我的行如下所示：

<div class="column ui-sortable">
    <div class="portlet" data-sort="id=1">
        <div class="portlet-header">Question 1</div>
        <div class="portlet-content">Answer 1</div>
    </div>
    <div class="portlet" data-sort="id=2">
        <div class="portlet-header">Question 2</div>
        <div class="portlet-content">Answer 2</div>
    </div>
    <div class="portlet" data-sort="id=3">
        <div class="portlet-header">Question 3</div>
        <div class="portlet-content">Answer 3</div>
    </div>
</div>

交换前两个元素后得到这样的数据：

"id[]=2&id[]=1&id[]=3"

【讨论】：