Home > Backend Development > PHP Tutorial > About PHP+jQuery-ui Drag floating layer to sort and save to database instance

About PHP+jQuery-ui Drag floating layer to sort and save to database instance

藏色散人
Release: 2023-04-08 13:18:01
forward
3242 people have browsed it

PHP jQuery-ui implements dragging floating layer sorting layout and saves the dragged floating layer position sorting result to the database instance.

About PHP+jQuery-ui Drag floating layer to sort and save to database instance

First introduce the jQuery library and jquery-ui.min.js, then place a loading image during dragging, and drag multiple modules read from the database Layer.modules, and #orderlist are used to record the ordering value of the 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>
Copy after login

Page js:

$(function() { 
    $(".m_title").bind(&#39;mouseover&#39;, 
    function() { 
        $(this).css("cursor", "move") 
    }); 
 
    var $show = $("#loader"); //进度条 
    var $orderlist = $("#orderlist"); 
    var $list = $("#module_list"); 
 
    $list.sortable({ 
        opacity: 0.6, 
        revert: true, 
        cursor: &#39;move&#39;, 
        handle: &#39;.m_title&#39;, 
        update: function() { 
            var new_order = []; 
            $list.children(".modules").each(function() { 
                new_order.push(this.title); 
            }); 
            var newid = new_order.join(&#39;,&#39;); 
            var oldid = $orderlist.val(); 
            $.ajax({ 
                type: "post", 
                url: "update.php", 
                data: { 
                    id: newid, 
                    order: oldid 
                }, 
                //id:新的排列对应的ID,order:原排列顺序 
                beforeSend: function() { 
                    $show.html("<img  src=&#39;images/load.gif&#39; / alt="About PHP+jQuery-ui Drag floating layer to sort and save to database instance" > 正在更新"); 
                }, 
                success: function(msg) { 
                    $show.html(""); 
                } 
            }); 
        } 
    }); 
});
Copy after login

Drag and save to the database, the code in ajax.php:

$order = $_POST[&#39;order&#39;]; 
$itemid = trim($_POST[&#39;id&#39;]); 
if (!empty($itemid)) { 
    if ($order != $itemid) { 
        $query = mysql_query("update sortlist set sort=&#39;$itemid&#39; where id=1"); 
        if ($query) { 
            echo $itemid; 
        } else { 
            echo "none"; 
        } 
    } 
}
Copy after login

Related recommendations:

PHP video tutorial://m.sbmmt.com/course/list/29/type/2.html

The above is the detailed content of About PHP+jQuery-ui Drag floating layer to sort and save to database instance. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
php
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template