search
HomeBackend DevelopmentPHP TutorialAbout the implementation of drag-and-drop sorting of secondary directories (source code sample download)_PHP tutorial

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

Jul 21, 2016 pm 03:12 PM
downloadLevel 2aboutexistaccomplishdevelopdragsortSource codeofTable of contentsExample

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 '";
  }
}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);
}
?>

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

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/326774.htmlTechArticle在开发项目中经常碰到二级目录形式。比如文章模块、产品模块,很多应多都基于两级分类形式。而普通的解决排序方案,不管是一级分类...
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How does PHP type hinting work, including scalar types, return types, union types, and nullable types?How does PHP type hinting work, including scalar types, return types, union types, and nullable types?Apr 17, 2025 am 12:25 AM

PHP type prompts to improve code quality and readability. 1) Scalar type tips: Since PHP7.0, basic data types are allowed to be specified in function parameters, such as int, float, etc. 2) Return type prompt: Ensure the consistency of the function return value type. 3) Union type prompt: Since PHP8.0, multiple types are allowed to be specified in function parameters or return values. 4) Nullable type prompt: Allows to include null values ​​and handle functions that may return null values.

How does PHP handle object cloning (clone keyword) and the __clone magic method?How does PHP handle object cloning (clone keyword) and the __clone magic method?Apr 17, 2025 am 12:24 AM

In PHP, use the clone keyword to create a copy of the object and customize the cloning behavior through the \_\_clone magic method. 1. Use the clone keyword to make a shallow copy, cloning the object's properties but not the object's properties. 2. The \_\_clone method can deeply copy nested objects to avoid shallow copying problems. 3. Pay attention to avoid circular references and performance problems in cloning, and optimize cloning operations to improve efficiency.

PHP vs. Python: Use Cases and ApplicationsPHP vs. Python: Use Cases and ApplicationsApr 17, 2025 am 12:23 AM

PHP is suitable for web development and content management systems, and Python is suitable for data science, machine learning and automation scripts. 1.PHP performs well in building fast and scalable websites and applications and is commonly used in CMS such as WordPress. 2. Python has performed outstandingly in the fields of data science and machine learning, with rich libraries such as NumPy and TensorFlow.

Describe different HTTP caching headers (e.g., Cache-Control, ETag, Last-Modified).Describe different HTTP caching headers (e.g., Cache-Control, ETag, Last-Modified).Apr 17, 2025 am 12:22 AM

Key players in HTTP cache headers include Cache-Control, ETag, and Last-Modified. 1.Cache-Control is used to control caching policies. Example: Cache-Control:max-age=3600,public. 2. ETag verifies resource changes through unique identifiers, example: ETag: "686897696a7c876b7e". 3.Last-Modified indicates the resource's last modification time, example: Last-Modified:Wed,21Oct201507:28:00GMT.

Explain secure password hashing in PHP (e.g., password_hash, password_verify). Why not use MD5 or SHA1?Explain secure password hashing in PHP (e.g., password_hash, password_verify). Why not use MD5 or SHA1?Apr 17, 2025 am 12:06 AM

In PHP, password_hash and password_verify functions should be used to implement secure password hashing, and MD5 or SHA1 should not be used. 1) password_hash generates a hash containing salt values ​​to enhance security. 2) Password_verify verify password and ensure security by comparing hash values. 3) MD5 and SHA1 are vulnerable and lack salt values, and are not suitable for modern password security.

PHP: An Introduction to the Server-Side Scripting LanguagePHP: An Introduction to the Server-Side Scripting LanguageApr 16, 2025 am 12:18 AM

PHP is a server-side scripting language used for dynamic web development and server-side applications. 1.PHP is an interpreted language that does not require compilation and is suitable for rapid development. 2. PHP code is embedded in HTML, making it easy to develop web pages. 3. PHP processes server-side logic, generates HTML output, and supports user interaction and data processing. 4. PHP can interact with the database, process form submission, and execute server-side tasks.

PHP and the Web: Exploring its Long-Term ImpactPHP and the Web: Exploring its Long-Term ImpactApr 16, 2025 am 12:17 AM

PHP has shaped the network over the past few decades and will continue to play an important role in web development. 1) PHP originated in 1994 and has become the first choice for developers due to its ease of use and seamless integration with MySQL. 2) Its core functions include generating dynamic content and integrating with the database, allowing the website to be updated in real time and displayed in personalized manner. 3) The wide application and ecosystem of PHP have driven its long-term impact, but it also faces version updates and security challenges. 4) Performance improvements in recent years, such as the release of PHP7, enable it to compete with modern languages. 5) In the future, PHP needs to deal with new challenges such as containerization and microservices, but its flexibility and active community make it adaptable.

Why Use PHP? Advantages and Benefits ExplainedWhy Use PHP? Advantages and Benefits ExplainedApr 16, 2025 am 12:16 AM

The core benefits of PHP include ease of learning, strong web development support, rich libraries and frameworks, high performance and scalability, cross-platform compatibility, and cost-effectiveness. 1) Easy to learn and use, suitable for beginners; 2) Good integration with web servers and supports multiple databases; 3) Have powerful frameworks such as Laravel; 4) High performance can be achieved through optimization; 5) Support multiple operating systems; 6) Open source to reduce development costs.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft