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

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

程序运行后界面：

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

赞 (0)

相关推荐

  • asp.net+jquery Gridview的多行拖放， 以及跨控件拖放

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="t

  • 广泛收集的jQuery拖放插件集合

    广泛收集的jQuery拖放插件集合

    今天分享给大家一些非常棒的的jQuery插件拖放功能. 有了这些插件,你会允许你的访问者个性化的网站和它的工具,根据自己的需要,并以这种方式,你提供定制选项的负载展现方式 jQuery mb.containerPlus (演示 | 下载) 在建立功能齐全,完全可换肤的容器,这是一个有用的插件.容器可以设置拖动,调整大小,可折叠和可最小化. jQuery的卷轴插件 (演示 | 下载) 卷轴是一个jQuery插件,它需要一个图片标签,使现场的"投影"的预建动画帧序列.其目的是要提供360°

  • javascript 拖放效果实现代码

    有许多理由让你在页面中加入拖放的功能,其中最简单的理由是重新组织数据.举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或 select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案.或者也许你想在网站上拥有一个可以被用户移动的导航窗口.这些都是使用拖放功能的简单理由,因为你能够实现! 在你的网页上实现拖放的效果并不是很复杂.首先,我们知道鼠标的位置,然后我们需要了解用户什么时候点击一个元素,以至于我们知道要准备开始拖动它,最后我们要

  • Java实现鼠标拖放功能的方法

    本文实例讲述了Java利用鼠标的拖放来实现交换程序数据的方法,即所谓的鼠标拖放功能.鼠标的拖放功能在图形化系统中非常常用,Java 提供了java.awt.dnd 和java.awt.datatransfer 包来支持该功能.本例演示如何在程序中实现拖放的实现方法,当在窗口上部的"Hello World!"标签点下鼠标,并拖至窗口下部的文本框放开,则在文本框中将添加"Hello World !"文本:继续上述过程,将继续添加该文本. 该程序功能具体的实现思路和方法为

  • Vue.js实现拖放效果的实例

    Vue.js实现拖放效果的实例

    页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>

  • Javascript拖拽&拖放系列文章3之细说事件对象第1/4页

    Javascript拖拽&拖放系列文章3之细说事件对象第1/4页

    在阅读本文前,可以先阅读<Javascript拖拽&拖放系列文章2之offsetLeft.offsetTop.offsetWidth.offsetHeight属性>这篇文章,以理清上下文关系.好了,让我们开始进入正题. 模型相同的属性/方法 1 Button属性 Integer类型,可读可写.对于特定的鼠标事件,表示按下的鼠标按钮,它可以在拖拽的时候,判断是否是鼠标左键引发mousedown事件.它的所有取值及其意义(参考自<Javascript高级程序设计>)好了,让我们

  • 脚本div实现拖放功能(两种)

    网页上有很多拖曳的操作,比如拖动树状列表,可拖曳的图片等. 1.原生拖放实现 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet"

  • JavaScript实现网页对象拖放功能的方法

    本文实例讲述了JavaScript实现网页对象拖放功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Drag</title> <meta http-equiv=

  • JavaScript 图片放大镜（可拖放、缩放效果）第1/4页

    前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

  • JavaScript 拖放效果代码

    这个程序的原型是在做图片切割效果的时候做出来的,那时参考了好几个同类的效果,跟muxrwc和BlueDestiny学习了不少东西. 虽然每次整理都觉得很好了,不过每隔一段时间又会发现得某个地方可以改善,某个地方有错误,某些需求需要实现,就像自己学习的知识那样. 这里考虑到有的人可能只需要简单的拖放,所以有一个简化版的拖放SimpleDrag,方便学习. 效果预览 ps:在maxthon下如果开启广告过滤的话很可能会被过滤掉(不知有什么方法可以避免). 程序说明 [程序原理] 这里以SimpleD

随机推荐