基于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 相关文章推荐
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
详解JS数值Number类型
Feb 07 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
js之ajax文件上传
May 13 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框架的性能
2008/01/10 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
puppeteer库入门初探
2019/01/09 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
初任培训自我鉴定
2013/10/07 职场文书
学校大课间活动方案
2014/01/30 职场文书
大学生就业意向书范文
2014/04/01 职场文书
小班开学寄语
2014/04/04 职场文书
政风行风评议整改方案
2014/09/15 职场文书
员工工作能力评语
2014/12/31 职场文书
大学生团日活动总结
2015/05/06 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技