4

ねえ、私はjqueryとajaxに非常に慣れていないので、これを正しく行う方法についてのアドバイスを探しています。

必要に応じて整理できるように、並べ替え可能なdivを使用していました。それは次のように見えました：

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

そして、私のajaxデータには、次のようなものがありました。

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

これは問題なく機能しましたが、データを分解することは理にかなっており、divを2つの別々のdivに分割し、connectWithを使用して2つの間でコンテンツをドラッグできるようにしました。

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

私が今理解しようとしているのは、私のajaxputで両方のdivのデータを送信する方法です。私は明白なことを試みました：

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

しかし、運はありません。私は間違いなくどんな援助にも感謝します。

乾杯、ショーン

4

2 に答える 2

6

まず、ID の代わりにクラスを使用する必要があります。より柔軟になります。

そして、問題は 2 つのオブジェクトがあり、呼び出しのたびにデータの内容が上書きされるという事実にあると思います。

次のような関数を使用する必要があります。

    data : getContent(),

    function getContent() {
        var data = "";

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

        });
       return data;
    }
于 2012-06-22T15:35:04.510 に答える
0

これを行うには、もっと簡単な方法があります。jQuery UI の例のポートレットを使用しましたが、列が 3 つではなく 1 つしかありません: http://jqueryui.com/sortable/#portlets

すべてのポートレットをシリアライズしたい。だからここに私のコードがあります：

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

2 番目のパラメーターのキーは、次のようにフォーマットする必要が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>

最初の 2 つの要素を交換すると、次のようなデータになります。

"id[]=2&id[]=1&id[]=3"
于 2014-09-19T13:09:54.730 に答える