Jquery sortable/serialize with sortable and connect with

问题:

Hey all I'm extremely new to jquery and ajax and I'm looking for some advice on how to do this correctly.

I had a div that I was using sortable on so I could arrange things as needed. It looked something like:

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

And then in my ajax data I had something like:

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

Which worked fine but it made sense to disaggregate the data and I broke the div into two separate div's and used the connectWith to allow the dragging on content between the two:

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

What I'm trying to figure out now is how to send the data of both div's in my ajax put. I tried the obvious:

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

But no luck. I'd definitely appreciate any assistance.

Cheers, Sean

回答1:

Firstly you should use classes instead of IDs, it'd be more flexible.

And I think the problem comes from the fact that you have 2 object, the data content is overwritten after each call.

You should use a function, something like this:

    data : getContent(),      function getContent() {         var data = "";          $(".resource-detail-content").each(function(){         if (data == "")                data += $(this).serialize();         else             data += "&" + $(this).serialize();          });        return data;     } 

回答2:

There is a much easier way to do this. I've using the portlets from the jQuery UI example, but I only have one column instead of three: http://jqueryui.com/sortable/#portlets

I want to serialize all the portlets. So here's my code:

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

The attribute key in the second param changes the behavior to search for a special data-sort attribute which should be formatted like this:

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

In HTML, my rows look like this:

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

Ending up with data like this after I swapped the first two elements:

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

文章来源: Jquery sortable/serialize with sortable and connect with