About PHP + jQuery UI drag floating layer to sort and save to database instance

The PHP + jQuery UI implements the drag floating layer sorting layout and saves the dragged floating layer position sorting results to the database instance.

First, jQuery library and jquery-ui.min.js are introduced, then a drag loading image is placed, and multiple module drag layers are read from the database. Modules and orderlist are used to record the sorting values of modules.

<script type="text/javascript" src="jquery.js"></script>  

<script type='text/javascript' src='js/jquery-ui.min.js'></script>

<div id="loader"></div>  

<div id="module_list">  

<input type="hidden" id="orderlist" value="<?php echo $sort; ?>" />  


                for ($i = 0; $i < $len; $i++) { 


   <div class="modules" title="<?php echo $sort_arr[$i]; ?>">  

    <h3 class="m_title">Module: 

     <!--?php echo $sort_arr[$i]; ?--></h3>  


     <!--?php echo $sort_arr[$i]; ?--></p>  


   <!--?php } ?-->  

   <div class="cl"></div>  



Page js:

$(function() { 


    function() { 

        $(this).css("cursor", "move") 



    var $show = $("#loader "); / / progress bar 

    var $orderlist = $("#orderlist"); 

    var $list = $("#module_list"); 



        opacity: 0.6, 

        revert: true, 

        cursor: 'move', 

        handle: '.m_title', 

        update: function() { 

            var new_order = []; 

            $list.children(".modules").each(function() { 



            var newid = new_order.join(','); 

            var oldid = $orderlist.val(); 


                type: "post", 

                url: "update.php", 

                data: { 

                    id: newid, 

                    order: oldid 


                //id: the id corresponding to the new arrangement, order: the original arrangement 

                beforeSend: function() { 

                    $show.html("<img src='images/load.gif' /> Updating"); 


                success: function(msg) { 








Drag to save to the database, ajax.php Code:

$order = $_POST['order']; 

$itemid = trim($_POST['id']); 

if (!empty($itemid)) { 

    if ($order != $itemid) { 

        $query = mysql_query("update sortlist set sort='$itemid' where id=1"); 

        if ($query) { 

            echo $itemid; 

        } else { 

            echo "none"; 





The above is about PHP + jQuery UI dragging floating layer to sort and save to database instance

More at

How to become an architect from a coder: Catalog Daquan (continuous update) 50W annual salary challenge!

Keywords: PHP JQuery Database Javascript

Added by Cerebral Cow on Wed, 18 Mar 2020 16:29:18 +0200