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

2019-07-24 07:42栏目:编程学习

在支付品种中时常境遇二级目录格局。例如文章模块、产品模块,非常多应多都基于两级分类方式。而常见的消除排序方案,不管是拔尖分类,依然数不尽分类,都是由管理员在后台手动编辑同级分类排序的值来安装排序,根据该值的尺寸决定显示的次第。那样的操作办法比较麻烦。jQuery有对于排序选择拖拽格局来促成排序,从用户规模,这样的操作十三分直观,操作便利。以往在二个门类中,产品分类采纳的是两级分类,展现如下图所示:

index.php中 var autoSave = false; 调控不自动提交。
index.php

图片 1

复制代码 代码如下:

在排序难题上,决定动用jQuery的拖拽插件来兑现:拖拽超级分类时,对一流分类开始展览排序;拖拽某拔尖分类上面包车型大巴子分类时,对该子分类举行拖拽排序。

<?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" ";
<html xmlns=";
<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>

图片 2

db.php

拖拽一流分类名称前台的“ ”号Logo,对超级分类开始展览拖拽排序。

复制代码 代码如下:

图片 3

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

拖拽某顶级分类下的二级分类名称前的“-”号Logo,对该分类下的二级分类进行拖拽排序;

电动提交管理文件 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

复制代码 代码如下:

复制代码 代码如下:

CREATE TABLE IF NOT EXISTS `product_classify` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `parentId` int(10) unsigned NOT NULL,
  `name` varchar(50) DEFAULT NULL,
  `sort` int(10) unsigned NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;

<?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

复制代码 代码如下:

复制代码 代码如下:

INSERT INTO `product_classify` (`id`, `parentId`, `name`, `sort`) VALUES
(1, 0, '魔术道具', 1),
(2, 1, '近景魔术', 2),
(3, 1, '舞台魔术', 1),
(4, 1, '刘谦魔术', 3),
(5, 0, '千术道具', 2),
(6, 5, '麻将牌九类别', 3),
(7, 5, '扑克种类', 1),
(8, 5, '色子类别', 5),
(9, 5, '变牌器体系', 4),
(10, 5, '高科学技术系列', 2);

<?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
目录包括文件,如下图:

复制代码 代码如下:

图片 4

<style type="text/css">
<!--
body{margin:0px;}
img{vertical-align:middle;}
.tab td{height:28px;font-size:13px;background-color:#FFFFFF;}
form{margin:0px;padding:0px;}
.edit,.del,.pointer{cursor:pointer;}
.ui-move{border:1px dashed #666;height:30px;}
.title{text-align:left;padding-left:7px;height:30px;font-size:13px;font-weight:bold;color:#444;}

程序运维后分界面:

ul,li{ margin:0px;padding:0px;}
.left_nav{margin:0px 10px 0 10px;padding-top:5px;font-size:14px;line-height:30px;}
.left_nav li{list-style-type:none;}
.nav{width:280px;list-style-type:none;text-align:left;}
.nav li span{margin:0 0px 0 10px;font-size:12px;}
/*==================二级目录===================*/
.nav li ul{list-style:none;text-align:left;margin-top:4px;}
.nav li ul li{ text-indent:25px;border:none;/*二级目录的背景象*/ margin:-7px 0 0 0;_margin:0px 0 8px 0;}
.navv li span{margin:0 0px 0 10px;font-size:12px;}
.f{vertical-align: middle;width:16px;height:16px;}
.nav div{display:none;}
-->
</style>

图片 5

载入js文件及代码

作者:Zjmainstay    
出处:

复制代码 代码如下:

您可能感兴趣的稿子:

  • JavaScript完结网页对象拖放功能的主意
  • Java完毕鼠标拖放成效的措施
  • Vue.js完结拖放效果的实例
  • javascript 拖放效果落到实处代码
  • JavaScript 拖放效果代码
  • Javascript拖拽&拖放系列小说3之细说事件指标
  • JavaScript 图片放大镜(可拖放、缩放效果)
  • 广大搜罗的jQuery拖放插件集结
  • asp.net jquery Gridview的多行拖放, 以及跨控件拖放
  • 脚本div完毕拖放作用(三种)

<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(document).ready(function(){
  $("#mm").sortable({
    opacity: 0.5,
    cursor:'move',
    revert:true,
    handle:'.f',
    placeholder:'ui-move',
    update:function(){
      serial=$(this).sortable("serialize");
      $("#return").load("myRun/sort.php?" serial);
    }
  });
  $("#mm div").sortable({
    opacity: 0.5,
    cursor:'move',
    revert:true,
    handle:'.t',
    placeholder:'ui-move',
    update:function(){
      serial=$(this).sortable("serialize");
      $("#return").load("myRun/sort.php?" serial);
    }
  });
  $(".f").toggle(function(){
    if($(this).attr("src")=='images/plus.gif'){
      $("#mm").find(".f").attr("src","images/plus.gif");//将全数大类后边的Logo改为加号
      $("#mm").find("div").hide();//掩饰子类
      $('div',$(this).parents('.nav:first')).show();//呈现当前点击大类的子类
      $(this).attr("src","images/nofollow.gif");//将近期点击的大类前边的加号Logo改换为减号Logo
    }else{
      $(this).attr("src","images/plus.gif");
      $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first') '.odd2').hide();
    }
  },function(){
    if($(this).attr("src")=='images/plus.gif'){
      $("#mm").find(".f").attr("src","images/plus.gif");
      $("#mm").find("div").hide();
      $('div',$(this).parents('.nav:first')).show();
      $(this).attr("src","images/nofollow.gif");
     }else{
      $(this).attr("src","images/plus.gif");
      $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first') '.odd2').hide();
     }
  });
  //$('.odd2','table:first').hide();//起头化 掩盖大旨分类    <--退换:在css中把子类display:none。那样能够平昔体现第一个。从前的效用是全体进行,然后在任何隐敝,然后在展现第一个。不太赏心悦目。
  $('#mm ul:first div').show();//显示第八个主旨分类列表
  $('#mm ul:first .f').attr("src","images/nofollow.gif");//退换图片为“-”状
});
</script>

来得代码

复制代码 代码如下:

<div class="left_nav" id="mm">
<span style='display:none' id="menu_productclassify"></span>
<?php
//通过where条件来过滤子类,仅突显分类(超级)
$sql='select a.id,a.parentId,a.name,a.sort,count(b.id) as count from product_classify as a';
$sql.=' left join product_classify as b on b.parentId=a.id where a.parentId=0';
$sql.=' group by a.id order by a.sort';
$query=mysql_query($sql);
if(mysql_num_rows($query)){
  while($arr=mysql_fetch_array($query)){
    echo '<ul id="menu_'.$arr[id].'" class="nav">';
    echo "<li id='nav_li'><img class=f src='images/plus.gif'>$arr[name]($arr[count])";
    $sql="select a.id,a.name,a.sort from product_classify as a where a.parentId=$arr[id] group by a.id order by a.sort";
    $query2=mysql_query($sql);
    if(mysql_num_rows($query2)){
      echo "<div id='two_$arr[id]'><span style='display:none' id='menu_productclassify'></span>";
      while($arr2=mysql_fetch_array($query2)){
        echo "<ul id='menu_$arr2[id]' class='navv'>";
        echo "<li><img class=t src='images/nofollow.gif'>$arr2[name]</li>";
        echo "</ul>";
      }
      echo '</div>';
    }
    echo "</li></ul>";
  }
}else{
  echo '<li id="nav_li">暂无产品分类</li>';
}
?>
</div>

排序操作sort.php

复制代码 代码如下:

<?php
include("../conn.php");
$menu=$_GET['menu'];
switch(strtolower($menu[0])){
  case 'productclassify':
    $table='product_classify';
    break;
}
for($i=1;$i<count($menu);$i ){
  $sql='UPDATE '.$table.' SET sort=' . $i . ' WHERE id=' . $menu[$i];
  mysql_query($sql);
}
?>

实例下载 二级目录拖拽排序的落到实处及示范源码下载

你也许感兴趣的稿子:

  • 通过jquery-ui中的sortable来兑现拖拽排序的总结实例
  • jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
  • jquery拖拽排序轻易完结形式(效果巩固版)
  • jqueryUI里拖拽排序示例深入分析
  • javascript落实表格排序 编辑 拖拽 缩放
  • dhtmlxTree目录树扩展右键菜单以及拖拽排序的贯彻方式
  • JS CSS制作DIV层可(最小化/拖拽/排序)功能达成代码
  • 大致的jquery拖拽排序效果实当代码
  • js 表格排序(编辑 拖拽 缩放)
  • 微信小程序之拖拽排序(代码分享)

版权声明:本文由威尼斯人app发布于编程学习,转载请注明出处:基于jQuery实现的百度导航li拖放排列效果,即时更