基于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 相关文章推荐
javascript eval函数深入认识
Feb 21 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
面试常见的js算法题
Mar 23 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
浅谈Vue数据响应思路之数组
Nov 06 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和.net的区别
2014/09/28 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
php压缩文件夹最新版
2018/07/18 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python读取键盘输入的2种方法
2015/06/16 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
python 实现图片裁剪小工具
2021/02/02 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
大学社团活动策划书
2014/01/26 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
医院消毒隔离制度
2015/08/05 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL