Tips:点此可运行HTML源码

jQuery实现百度导航li拖放排列效果，即时更新数据库

index.php中 var autoSave = false; 控制不自动提交。

index.php 
<?php
    require 'db.php';
    $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`";
    $lis = mysql_query($query,$conn);
    $li_count = mysql_num_rows($lis);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>li Move</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<style>
    ul{
        border: 1px solid red;
        height: 150px;
        margin: auto;
        width: 745px;
    }

    li{
        border: 1px solid #AABBCC;
        float: left;
        list-style: none outside none;
        margin: 10px;
        text-align: center;
        width: 120px;
        cursor: move;
    }
    #reset{
        border: 1px solid #AABBCC;
        cursor: pointer;
        float: right;
        height: 20px;
        padding: 2px;
        width: 40px;
    }
    #save{
        border: 1px solid #AABBCC;
        cursor: pointer;
        float: right;
        height: 20px;
        padding: 2px;
        width: 40px;
    }
</style>
<div id="reset">Reset</div>
<div id="save">Save</div>
<ul>
    <?php
        while($li = mysql_fetch_assoc($lis)){
            echo '<li id="'.$li['id'].'" order="'.$li['order'].'">'.$li['name'].'</li>';
        }
    ?>
</ul>
<script type="text/javascript">
    $(document).ready(function(){
        $("ul").css({height:<?php echo (ceil($li_count/5)*40+10) ?>});
        var on_move_li = '';
        var on_move_li_offset = '';
        var on_move_li_index = '';
        var autoSave = false;
        function bindMoveListening(){
            $("li").mousedown(function(){
                on_move_li_offset = $(this).offset();
                on_move_li = $(this);
                on_move_li_index = on_move_li.prevAll().length;
                if(on_move_li_index == 0) var index = 1;
                else var index = on_move_li_index;
                //创建空li
                $("ul").children("li").eq(index-1).after('<li class="dashed" style="border:1px dashed #AABBCC">&nbsp;</li>')
                on_move_li.addClass('moving').css({left:on_move_li_offset.left,top:on_move_li_offset.top,position:'absolute','z-index':3,border:'1px dashed #AABBCC'});
                $("ul").mousemove(function(e){
                    if($(this).find(".moving").length != 0) {
                        var clientX = e.clientX-60;
                        var clientY = e.clientY-20;
                        on_move_li.css({left:clientX,top:clientY});
                    }
                });
                $("ul").mouseup(function(e){
                    if($(this).find(".moving").length != 0) {
                        var clientX = e.clientX;
                        var clientY = e.clientY;
                        var times = Math.floor((clientY-(on_move_li_offset.top+10))/42);
                        var index = (times*5)+(Math.floor((clientX-(on_move_li_offset.left+50))/120)+on_move_li_index);
                        if(index > <?php echo $li_count ?>) index = <?php echo $li_count ?>;
                        on_move_li.attr('class',null).attr('style',null);
                        $(".dashed").remove();
                        var fromid = on_move_li.attr('id');
                        var fromorder = on_move_li.attr('order');
                        var toorder = $("ul").children("li").eq(index).attr('order');
                        if(index == on_move_li_index && index>0) index = index-1;
                        
                        if(on_move_li_index == 0 && (index == -1||index == 0) ) $("ul").children("li").eq(1).before(on_move_li);
                        else if(index == -1) $("ul").children("li").eq(0).before(on_move_li);
                        else $("ul").children("li").eq(index).after(on_move_li);
                        if(autoSave){
                            $.ajax({
                                url:'limove_process.php',
                                type:'POST',
                                data:{'fromid':fromid,'fromorder':fromorder,'toorder':toorder},
                                success:function(newdata){
                                    $("ul").empty().append(newdata);
                                    bindMoveListening();
                                }
                            });
                        }
                    }
                });
            });
            $("#reset").click(function(){
                $.ajax({
                    url:'limove_reset.php',
                    type:'POST',
                    success:function(newdata){
                        $("ul").empty().append(newdata);
                        bindMoveListening();
                    }
                });
            });
            $("#save").click(function(){
                var data = '';
                var lis = $("ul").children("li");
                $.each(lis,function(i){
                    data += lis.eq(i).attr('id')+',';
                });
                $.ajax({
                    url:'limove_save.php',
                    type:'POST',
                    data:{'data':data.substr(0,data.length-1)},
                    success:function(newdata){
                        $("ul").empty().append(newdata);
                        bindMoveListening();
                    }
                });
            });
        }
        bindMoveListening();
    });
</script>
</body>
</html>

 

db.php 
<?php
static $connect = null;
static $table = '';
if(!isset($connect)) {
    $connect = mysql_connect("localhost","root","");
    if(!$connect) {
        $connect = mysql_connect("localhost","Zjmainstay","");
    }
    if(!$connect) {
        die('Can not connect to database.Fatal error handle by /test/db.php');
    }
    mysql_select_db("test",$connect);
    mysql_query("SET NAMES utf8",$connect);
    $conn = &$connect;
    $db = &$connect;
}

 

自动提交处理文件 limove_process.php 
<?php
    require 'db.php';
    $fromid = $_POST['fromid'];
    $fromorder = $_POST['fromorder'];
    $toorder = $_POST['toorder'];
    $updateorder = $toorder;
    $eqf = '';
    $eqt = '=';
    $symbol = '-';
    $notZero = 'AND `order`>1';
    if($fromorder > $toorder){
        $eqf = '=';
        $eqt = '';
        $symbol = '+';
        $fromorder = $toorder;
        $toorder = $_POST['fromorder'];
        $updateorder = $fromorder;
        $notZero = '';
    }
    mysql_query("START TRANSACTION",$conn);
    
    $query = "UPDATE `limove` SET `order`=`order`{$symbol}1 WHERE (`order`>{$eqf}{$fromorder} AND `order`<{$eqt}{$toorder} {$notZero})";
    $return1 = mysql_query($query,$conn);
    $query = "UPDATE `limove` SET `order`={$updateorder} WHERE `id`={$fromid}";
    $return2 = mysql_query($query,$conn);
    
    if($return1&$return2){
        mysql_query("COMMIT",$conn);
    }else {
        mysql_query("ROLLBACK",$conn);
    }
    $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`";
    $lis = mysql_query($query,$conn);
    while($li = mysql_fetch_assoc($lis)){
        echo '<li id="'.$li['id'].'" order="'.$li['order'].'">'.$li['name'].'</li>';
    }
    exit(0);

 

保存按钮处理文件 limove_save.php 
<?php
    require 'db.php';
    $data = explode(',',$_POST['data']);
    mysql_query("START TRANSACTION",$conn);

    $return = 1;
    foreach($data as $order => $id){
        $order++;
        $query = "UPDATE `limove` SET `order`={$order} WHERE `id`={$id}";
        $return = mysql_query($query,$conn)&$return;
    }

    if($return){
        mysql_query("COMMIT",$conn);
    }else {
        mysql_query("ROLLBACK",$conn);
    }
    $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`";
    $lis = mysql_query($query,$conn);
    while($li = mysql_fetch_assoc($lis)){
        echo '<li id="'.$li['id'].'" order="'.$li['order'].'">'.$li['name'].'</li>';
    }
    exit(0);

 

重置按钮处理文件 limove_reset.php 
<?php
    require 'db.php';
    mysql_query("UPDATE limove SET `order`=`id`");
    $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`";
    $lis = mysql_query($query,$conn);
    while($li = mysql_fetch_assoc($lis)){
        echo '<li id="'.$li['id'].'" order="'.$li['order'].'">'.$li['name'].'</li>';
    }
    exit(0);

 

jquery-1.6.2.min.js文件下载： jquery-1.6.2.min.js

软件包下载：下载

目录包含文件，如下图：

程序运行后界面：

posted @ 2012-07-26 10:40  Zjmainstay  阅读(2570)  评论(0)  编辑  收藏  举报