二级目录拖放排序的实现(源代码示例下载)

二级目录形式在开发项目中经常遇到。例如，文章模块和产品模块大多基于两级分类。在常见的排序解决方案中，无论是一级分类还是多级分类，管理员都是在后台手工编辑同级分类的排序值来设置排序，并根据该值确定显示顺序。这种操作方式很麻烦。JQuery使用拖放来排序。从用户层面来说，这个操作非常直观，容易操作。曾经在一个项目中，产品分类采用两级分类，如下图所示：。

关于排序问题，决定使用jQuery的拖拽插件：拖拽一级分类时，对一级分类进行排序；当您将子类别拖到某个分类级别之下时，请拖动子类别并对其进行排序。

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

拖拽某一级分类下的二级分类名称前的"-"号图标，对该分类下的二级分类进行拖拽排序；下面是实现上述功能的数据库结构及程序代码数据库结构复制代码代码如下：如果不存在则创建表“产品分类器”(“id”int(10)无符号非空自动增量，` parentid ' int(10)无符号不为空，` name ' varchar(50)DEFAULT NULL，` sort ' int(10)无符号NOT NULL DEFAULT '0，` id `)ENGINE=MyISAM AUTO _ INCREMENT=27 DEFAULT CHARSET=utf8；导入数据复制代码代码如下：插入“产品分类器”(“标识”、“父标识”、“名称”、“排序”)值(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 '！-车身{ margin:0px} img {垂直-中间对齐：}.tab TD { height :28 pxfont-size :13 px；背景-color : # FFFFFF；}表单{ margin :0 pxpadding :0 px }。编辑，德尔。指针{ cursor:pointer}。ui-move{border:1px虚线# 666;高度：30 px}.title { text-align : left左填充：7 px高度：30 pxfont-size :13 px字体粗细：加粗；color: # 444}ul，Li { margin :0 pxpadding :0 px }。left _ nav { margin :0 px 10px 0 10px；填充-top :5 px；font-size :14 px线高：30 px}.left _ nav Li { list-style-type :无；}.导航{宽度：280像素列表样式-:型无；向左文本对齐：}.nav Li span { margin :0 0px 0 10px font-size :12 px；}/*==================二级目录===================*/.nav Li ul {列表式：无；向左文本对齐：页边距-top :4 px；}.nav Li ul Li { text-indent :25 px；border:none/*二级目录的背景色*/margin :-7px 0 0 0；_ margin:0px 0 8px 0}。navv Li span { margin :0 0px 0 10px font-size :12 px；}.f {垂直对齐： 中间；宽度：16 px高度：16px}。nav div { display : one }-/样式载入射流研究…文件及代码复制代码代码如下：脚本语言=' JavaScript '类型=' text/JavaScript ' src=' http : js/jquery 1。6 .2 .js/script脚本语言=' JavaScript ' type=' text/JavaScript ' src=' http : js/jquery-ui-1。7 .1 .定制。量滴js '/script脚本$(文档)。ready(function(){ $('#mm ')).可排序({ opacity: 0.5，cursor:'move '，revert:true，handle: ' .f '，placeholder:'ui-move '，update : function(){ serial=$(this).可排序(“序列化”)；$('#return ').加载(' myRun/sort.php '？串行);} });$('#mm div ').可排序({ opacity: 0.5，cursor:'move '，revert:true，handle: ' .' t '，placeholder:'ui-move '，update : function(){ serial=$(this).可排序(“序列化”)；$('#return ').加载(' myRun/sort.php '？串行);} });$('.f ').toggle(function(){ if($(this)).attr(' src ')==' images/plus。gif '){ $(' # mm ').查找('。f ').attr('src '，' images/plus。gif ')；//将全部大类前面的图标改为加号$('#mm ').查找(' div ').hide()；//隐藏子类$('div '，$(this).家长(' .nav:first ').show()；//显示当前点击大类的子类$(这个)。attr('src '，' images/no follow。gif ')；//将当前点击的大类前面的加号图标更改为减号图标}else{ $(this).attr('src '，' images/plus。gif ')；$('div '，$(this).家长(' .nav:first ').hide()；//$($(this).家长(' div : first ')。奇数2 ').hide()；} }，function(){ if($(this).attr(' src ')==' images/plus。gif '){ $(' # mm ').查找('。f ').attr('src '，' images/plus。gif ')；$('#mm ').查找(' div ').hide()；$('div '，$(this).家长(' .nav:first ').show()；$(这个)。attr('src '，' images/no follow。gif ')；}else{ $(this).attr('src '，' images/plus。gif ')；$('div '，$(this).家长(' .nav:first ').hide()；//$($(this).家长(' div : first ')。奇数2 ').hide()；} });//$(.奇数2 '，'表：first ').hide()；//初始化隐藏主题分类-改动：在钢性铸铁中把子类display:none。这样可以直接显示第一个。以前的效果是全部展开，然后在全部隐藏，然后在显示第一个。不太好看。

$('#mm ul:first div ').show()；//显示第一个主题分类列表$('#mm ul:first .f ').attr('src '，' images/no follow。gif ')；//改变图片为"-"状});/script显示代码复制代码代码如下： div class=' left _ nav ' id=' mm ' span style=' display : none ' id=' menu _ product分类器'/span？php/通过在哪里条件来过滤子类，仅显示分类（一级)$sql='从产品_分类为a '中选择a.id、a.parentId、a.name、a.sort、count(b.id)作为计数；$sql .='左连接产品_分类为b.parentId=a.id上的b，其中a . parent id=0 '；$sql .="按a.id分组，按a .排序排序";$ query=MySQL _ query($ SQL)；if(MySQL _ num _ rows($ query)){ while($ arr=MySQL _ fetch _ array($ query)){ echo ' ul id=' menu _ ' .$arr[id].""类=" navecho ' Li id=' nav _ Li ' img class=f src=' images/plus。gif ' $ arr[name]($ arr[count])；$sql='从产品_分类中选择a.id、a.name、a.sort作为a . parent id=$ arr[id]group by a . id order by a . sort '；$ query 2=MySQL _ query($ SQL)；if(MySQL _ num _ rows($ query 2)){ echo ' div id=' two _ $ arr[id]' span style=' display : none ' id=' menu _ product分类器'/span '；while($ arr 2=MySQL _ fetch _ array($ query 2)){ echo ' ul id=' menu _ $ arr 2[id]' class=' navv '；echo ' liimg class=t src=' images/no follow。gif ' $ arr 2[名称/Li]；echo '/ul '；} echo '/div '；}回声/Li/ul '；}}else{ echo 'li id='nav_li '暂无产品分类/李；}?/div排序操作sort.php复制代码代码如下：phpinclude('./conn . PHP ')；$ menu=$ _ GET[' menu ']；switch(strtolow($ menu[0]){ case ' product classifier ' : $ table=' product _ classifier '；打破；} for($ I=1；$我数($菜单);$i ){ $sql='UPDATE ' .$表.SET sort=' .$i . ' WHERE id=' .$菜单[$ I]；MySQL _ query($ SQL)；}?实例下载二级目录拖拽排序的实现及演示源码下载