栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

index.php中 var autoSave = false; 控制不自动提交。
index.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);
?>



li Move








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;
}

Reset
Save

    while($li = mysql_fetch_assoc($lis)){
    echo '
  • '.$li['name'].'
  • ';
    }
    ?>





db.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
复制代码 代码如下:
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['name'].'
  • ';
    }
    exit(0);

    保存按钮处理文件 limove_save.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['name'].'
  • ';
    }
    exit(0);

    重置按钮处理文件 limove_reset.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['name'].'
  • ';
    }
    exit(0);

    jquery-1.6.2.min.js文件下载: jquery-1.6.2.min.js
    软件包下载:limove_jb51.rar
    目录包含文件,如下图:

    程序运行后界面:

    作者:Zjmainstay    
    出处:http://www.cnblogs.com/Zjmainstay/
    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/112848.html
    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号