About the implementation of two-level directory drag-and-drop sequencing (source code example download) _php instance

The two-level directory format is often encountered in development projects. For example, the article module, product module, many should be based on the two-level classification form. The general solution sorting scheme, whether it is a first-class classification or a multilevel classification, is set by the administrator to manually edit the sorted values of sibling classifications in the background, depending on the size of the value to determine the order of the display. This way of operation is more cumbersome. jquery has a drag-and-drop approach to sorting, from the user level, such operations are very intuitive, easy to operate. Once in a project, the product classification is a class two classification, showing as shown in the following:

On the sorting issue, the decision was made to use jquery's drag-and-drop plug-in to sort the first-level categories and drag-and-drop the sub-categories below a classification.

Drag and drop the "+" icon at the foreground of the first class category and drag-and-drop sorting of the first class category.

Drag-and-drop the "-" icon in front of category two classification under a category, and drag the rank of category two.

Here is the database structure and program code to implement the above functions

database structure

Copy CodeThe code is as follows:
CREATE TABLE IF not EXISTS ' product_classify ' (
' id ' int (ten) unsigned not NULL auto_increment,
' ParentID ' int (ten) unsigned not NULL,
' Name ' varchar (DEFAULT NULL),
' Sort ' int (ten) unsigned not NULL DEFAULT ' 0 ',
PRIMARY KEY (' id ')
) Engine=myisam auto_increment=27 DEFAULT Charset=utf8;

Import Data
Copy CodeThe 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 Magic ', 3),
(5, 0, ' thousand props ', 2),
(6, 5, ' Mahjong Pai Gow series ', 3),
(7, 5, ' Poker series ', 1),
(8, 5, ' Dice series ', 5),
(9, 5, ' Variable Card series ', 4),
(10, 5, ' High-tech series ', 2);

Style code
Copy CodeThe code is as follows:


loading JS file and code
Copy CodeThe code is as follows:




Display Code
Copy CodeThe code is as follows:


Filter subclasses by where condition, show only categories (level one)
$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";
  $query 2=mysql_query ($sql);
  if (Mysql_num_rows ($query 2)) {
  echo "";
  while ($arr 2=mysql_fetch_array ($query 2)) {
  echo "
  ";
  echo "
  • $arr 2[name]
  ";
  echo "
  ";
  }
  Echo ';
  }
  echo "

";
}
}else{
Echo '

No Product Categories

';
}
?>


Sort Operation sort.php
Copy CodeThe code is as follows:
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);
}
?>

Example download
The realization and demonstration of the two-level catalogue drag-and-drop sorting source download

