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

Javascript 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
Iframe thickbox2.0使用的方法
Mar 05 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
jquery实现保存已选用户
Jul 21 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
理解 JavaScript EventEmitter
Mar 29 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
You might like
php学习之数据类型之间的转换代码
2011/05/29 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Hotels.com越南:酒店预订
2019/10/29 全球购物
本科生详细的自我评价
2013/09/19 职场文书
财会自我鉴定范文
2013/12/27 职场文书
校长就职演讲稿
2014/01/06 职场文书
给国外客户的邀请函
2014/01/30 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
党员自我剖析材料
2014/08/31 职场文书
防火标语大全
2014/10/06 职场文书
小升初自荐信范文
2015/03/05 职场文书
运动会广播稿20字
2015/08/19 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript