About the implementation of drag-and-drop sorting of secondary directories (source code sample download)_PHP tutorial

Second-level directory format is often encountered in development projects. For example, article modules and product modules, many apps are based on a two-level classification format. In ordinary sorting solutions, whether it is one-level classification or multi-level classification, the administrator manually edits the value of the same-level classification sorting in the background to set the sorting, and the display order is determined based on the value. This operation method is relatively cumbersome. jQuery has a drag-and-drop method for sorting. From the user level, this operation is very intuitive and easy to operate. In a project, product classification used a two-level classification, and the display is as shown in the figure below:

Regarding the sorting issue, we decided to use jQuery’s drag-and-drop plug-in: when dragging a first-level category, the first-level category will be sorted; when dragging a sub-category under a certain level of category, the sub-category will be sorted. Drag and drop to sort.

Drag the "+" icon on the front desk of the first-level category name to sort the first-level categories.

Drag the "-" icon in front of the name of the secondary category under a certain level of classification to sort the secondary categories under this category;

The following is the database structure and program code to implement the above functions

Database structure

Copy code The code is as follows:

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;

Import data

Copy code The code is as follows:

INSERT INTO `product_classify` (`id`, `parentId`, `name`, `sort`) VALUES
(1, 0, 'Magic props', 1),
(2, 1, 'Close-up magic', 2),
(3, 1, 'Stage magic', 1),
( 4, 1, 'Liu Qian's magic', 3),
(5, 0, 'Thousands of magic props', 2),
(6, 5, 'Mahjong Pai Gow series', 3),
( 7, 5, 'Poker series', 1),
(8, 5, 'Size series', 5),
(9, 5, 'Card changer series', 4),
(10, 5, 'High-Tech Series', 2);

Style Code

Copy Code The code is as follows:

Load js file and code

Copy the code The code is as follows:

<script><br>$(document).ready(function(){<br>  $("#mm").sortable({<br>    opacity: 0.5,<br>    cursor:'move',<br>    revert:true,<br>    handle:'.f',<br>    placeholder:'ui-move',<br>    update:function(){<br>      serial=$(this).sortable("serialize");<br>      $("#return").load("myRun/sort.php?"+serial);<br>    }<br>  });<br>  $("#mm div").sortable({<br>    opacity: 0.5,<br>    cursor:'move',<br>    revert:true,<br>    handle:'.t',<br>    placeholder:'ui-move',<br>    update:function(){<br>      serial=$(this).sortable("serialize");<br>      $("#return").load("myRun/sort.php?"+serial);<br>    }<br>  });<br>  $(".f").toggle(function(){<br>    if($(this).attr("src")=='images/plus.gif'){<br>      $("#mm").find(".f").attr("src","images/plus.gif");//将全部大类前面的图标改为加号<br>      $("#mm").find("div").hide();//隐藏子类<br>      $('div',$(this).parents('.nav:first')).show();//显示当前点击大类的子类<br>      $(this).attr("src","images/nofollow.gif");//将当前点击的大类前面的加号图标更改为减号图标<br>    }else{<br>      $(this).attr("src","images/plus.gif");<br>      $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first')+'.odd2').hide();<br>    }<br>  },function(){<br>    if($(this).attr("src")=='images/plus.gif'){<br>      $("#mm").find(".f").attr("src","images/plus.gif");<br>      $("#mm").find("div").hide();<br>      $('div',$(this).parents('.nav:first')).show();<br>      $(this).attr("src","images/nofollow.gif");<br>     }else{<br>      $(this).attr("src","images/plus.gif");<br>      $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first')+'.odd2').hide();<br>     }<br>  });<br>  //$('.odd2','table:first').hide();//初始化 隐藏主题分类    <--改动：在css中把子类display:none。这样可以直接显示第一个。以前的效果是全部展开，然后在全部隐藏，然后在显示第一个。不太好看。<br>  $('#mm ul:first div').show();//显示第一个主题分类列表<br>  $('#mm ul:first .f').attr("src","images/nofollow.gif");//改变图片为“-”状<br>});<br></script>

显示代码

复制代码 代码如下:

//通过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 '

';
    echo "
• $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 "
  ";
        while($arr2=mysql_fetch_array($query2)){
          echo "

  ";
          echo "
  • $arr2[name]
  ";
          echo "

  ";
        }
        echo '
  ';
      }
      echo "

";
  }
}else{
  echo '

暂无产品分类

';
}
?>

排序操作sort.php

复制代码 代码如下:

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

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

http://www.bkjia.com/PHPjc/326774.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/326774.htmlTechArticle在开发项目中经常碰到二级目录形式。比如文章模块、产品模块，很多应多都基于两级分类形式。而普通的解决排序方案，不管是一级分类...