关于二级目录拖拽排序的实现(源码示例下载)

发布时间：2020-12-13 06:16:04 所属栏目：PHP教程来源：网络整理

导读：在开发项目中经常碰到二级目录形式。比如文章模块、产品模块，很多应多都基于两级分类形式。而普通的解决排序方案，不管是一级分类，还是多级分类，都是由管理员在后台手动编辑同级分类排序的值来设置排序，根据该值的大小决定显示的顺序。这样的操作方式比

在开发项目中经常碰到二级目录形式。比如文章模块、产品模块，很多应多都基于两级分类形式。而普通的解决排序方案，不管是一级分类，还是多级分类，都是由管理员在后台手动编辑同级分类排序的值来设置排序，根据该值的大小决定显示的顺序。这样的操作方式比较烦琐。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,'魔术道具',1),
(2,1,'近景魔术',2),
(3,'舞台魔术',
(4,'刘谦魔术',3),
(5,'千术道具',
(6,5,'麻将牌九系列',
(7,'扑克系列',
(8,'色子系列',5),
(9,'变牌器系列',4),
(10,'高科技系列',2);

样式代码

代码如下:

载入js文件及代码

代码如下:

显示代码

代码如下:

排序操作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);
}
?>

实例下载

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!