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



index.php中 var autoSave = false; 控制不自动提交。
index.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);
?>












Reset
Save

while($li = mysql_fetch_assoc($lis)){
echo '

'.$li['name'].'

';
}
?>


$(document).ready(function(){
$("ul").css({height:});
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('

')
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 > ) index = ;
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();
});




db.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
代码如下:
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['name'].'

';
}
exit(0);

保存按钮处理文件 limove_save.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['name'].'

';
}
exit(0);

重置按钮处理文件 limove_reset.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['name'].'

';
}
exit(0);

jquery-1.6.2.min.js文件下载： jquery-1.6.2.min.js
软件包下载：limove_jb51.rar
目录包含文件，如下图：

程序运行后界面：

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