编程 Javascript

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

Posted in Javascript onJuly 31, 2012

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_3water.rar
目录包含文件，如下图：

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

程序运行后界面：

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

作者：Zjmainstay

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 剧场版你必须知道的javascript

May 27 Javascript

javascript 面向对象思想附源码

Jul 07 Javascript

javascript 面向对象全新理练之继承与多态

Dec 03 Javascript

Javascript的各种节点操作实例演示代码

Jun 27 Javascript

基于JavaScript实现继承机制之调用call()与apply()的方法详解

May 07 Javascript

原生js获取宽高与jquery获取宽高的方法关系对比

Apr 04 Javascript

jQuery实现contains方法不区分大小写的方法

Feb 13 Javascript

详解addEventListener的三个参数之useCapture

Mar 16 Javascript

JQuery实现可直接编辑的表格

Apr 16 Javascript

JS实现黑客帝国文字下落效果

Sep 01 Javascript

详解Vue.js入门环境搭建

Mar 17 Javascript

js动态添加表格逐行添加、删除、遍历取值的实例代码

Jan 25 Javascript

基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

Jul 31 #Javascript

jQuery.each()用法分享

Jul 31 #Javascript

artDialog 4.1.5 Dreamweaver代码提示/补全插件附下载

Jul 31 #Javascript

JavaScript中的私有/静态属性介绍

Jul 26 #Javascript

13 个JavaScript 性能提升技巧分享

Jul 26 #Javascript

了解一点js的Eval函数

Jul 26 #Javascript

基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)

Jul 26 #Javascript