À propos de PHP+jQuery-ui en faisant glisser la couche flottante pour la trier et l'enregistrer dans l'instance de base de données

PHP+jQuery-ui réalise la disposition de tri des couches flottantes par glissement et enregistre le résultat du tri de la position de la couche flottante glissée dans l'instance de base de données.

Introduisez d'abord la bibliothèque jQuery et jquery-ui.min.js, puis placez une image de chargement pendant le glisser, et faites glisser plusieurs modules lus depuis la base de données Layer.modules, et #orderlist sont utilisés pour enregistrer la valeur de commande du module .

<script type="text/javascript" src="jquery.js"></script>  
<script type=&#39;text/javascript&#39; src=&#39;js/jquery-ui.min.js&#39;></script>
<div id="loader"></div>  
<div id="module_list">  
<input type="hidden" id="orderlist" value="<?php echo $sort; ?>" />  
   <!--?php 
                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>  
    <p> 
     <!--?php echo $sort_arr[$i]; ?--></p>  
   </div>  
   <!--?php } ?-->  
   <div class="cl"></div>  
</div>

Page js :

$(function() { 
    $(".m_title").bind('mouseover', 
    function() { 
        $(this).css("cursor", "move") 
    }); 
 
    var $show = $("#loader"); //进度条 
    var $orderlist = $("#orderlist"); 
    var $list = $("#module_list"); 
 
    $list.sortable({ 
        opacity: 0.6, 
        revert: true, 
        cursor: 'move', 
        handle: '.m_title', 
        update: function() { 
            var new_order = []; 
            $list.children(".modules").each(function() { 
                new_order.push(this.title); 
            }); 
            var newid = new_order.join(','); 
            var oldid = $orderlist.val(); 
            $.ajax({ 
                type: "post", 
                url: "update.php", 
                data: { 
                    id: newid, 
                    order: oldid 
                }, 
                //id:新的排列对应的ID,order：原排列顺序 
                beforeSend: function() { 
                    $show.html("<img  src="/static/imghw/default1.png"  data-src="https://www.php.cn/course/list/29/type/2.html"  class="lazy"  src=&#39;images/load.gif&#39; / alt="À propos de PHP+jQuery-ui en faisant glisser la couche flottante pour la trier et l'enregistrer dans l'instance de base de données" > 正在更新"); 
                }, 
                success: function(msg) { 
                    $show.html(""); 
                } 
            }); 
        } 
    }); 
});

Faites glisser et enregistrez dans la base de données, le code dans ajax.php :

$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"; 
        } 
    } 
}

Recommandations associées :

Tutoriel vidéo PHP : https://www.php.cn/course/list/29/type/2.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!