管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　软件包下载：limove_.rar

　　目录包含文件，如下图：

　　

　　程序运行后界面：

作者：Zjmainstay　　　　

　　出处：http://www.cnblogs.com/Zjmainstay/

教程首页 更多教程