jquery可排序ajax-php集成

Posted 2021-02-27

html:
--------
 
 
<ul id="sortme">
 <li id="27" class="sortitem">Lorem</li>
 <li id="44" class="sortitem">Foo</li>
 <li id="136" class="sortitem">Bar</li>
 <li id="19" class="sortitem">Ipsum</li>
</ul>
 
<div id="data" style="background-color: #CCCCCC; padding: 15px; border: 
solid 1px #999;">
</div>
 
 
JQUERY:
-----------
 
$(document).ready(
 function()
 {
      $("#sortme").Sortable({
          accept : 'sortitem',
          onchange : function (sorted) {
              serial = $.SortSerialize('sortme');
 
    /*
    Instead of the $.ajax-call below, you could use these shorter funcs. In 
addition to the hash used by $.ajax, the SortSerialize method above also 
returns an object that can directly be used in the $().load and $.post/get 
functions:
 
    // $('#data').load("sortdata.php",serial.o.sortme);
 
    or
 
    // $.post("sortdata.php",serial.o.sortme, function(feedback){ 
$('#data').html(feedback); });
 
 
    */
 
     $.ajax({
                  url: "sortdata.php",
                  type: "POST",
                  data: serial.hash,
                  // complete: function(){},
                  success: function(feedback){ $('#data').html(feedback); }
                  // error: function(){}
              });
 
          }
      });
 }
);
 
 
 
SORTDATA.PHP
-------------------
 
<?php
 
// This can do anything it wants with the posted data which comes as an 
array. Here we just output it with print_r:
echo "DATA RECEIVED: <br>";
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>