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

来源：互联网发布：南风知我意七微txt下载编辑：程序博客网时间：2024/04/30 07:30

效果图：

enter image description here

源码下载

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"> </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

<?phpstatic $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);

转载自:http://www.9958.pw/post/jquery_baidu_li

0 0