二级目录拖拽排序的实现及演示源码下载

在开发项目中经常碰到二级目录形式。比如文章模块、产品模块，很多应多都基于两级分类形式。而普通的解决排序方案，不管是一级分类，还是多级分类，都是由管理员在后台手动编辑同级分类排序的值来设置排序，根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。jQuery有对于排序采用拖拽方式来实现排序，从用户层面，这样的操作非常直观，操作简便。曾经在一个项目中，产品分类采用的是两级分类，显示如下图所示：

在排序问题上，决定使用jQuery的拖拽插件来实现：拖拽一级分类时，对一级分类进行排序；拖拽某一级分类下面的子分类时，对该子分类进行拖拽排序。

拖拽一级分类名称前台的“+”号图标，对一级分类进行拖拽排序。

拖拽某一级分类下的二级分类名称前的“-”号图标，对该分类下的二级分类进行拖拽排序；

下面是实现上述功能的数据库结构及程序代码

数据库结构

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;

导入数据

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

样式代码

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

载入js文件及代码

<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");//将全部大类前面的图标改为加号      $("#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();    }  },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

<?phpinclude("../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);}?>

实例下载

二级目录拖拽排序的实现及演示源码下载