JavaScript jquery可排序的ajax php集成

Posted 2021-05-20

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>";
?>