怎么實(shí)現(xiàn)一個(gè)二級(jí)目錄拖拽排序功能

怎么實(shí)現(xiàn)一個(gè)二級(jí)目錄拖拽排序功能？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

代碼如下:

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;

導(dǎo)入數(shù)據(jù)

復(fù)制代碼 代碼如下:

INSERT INTO `product_classify` (`id`, `parentId`, `name`, `sort`) VALUES
(1, 0, '魔術(shù)道具', 1),
(2, 1, '近景魔術(shù)', 2),
(3, 1, '舞臺(tái)魔術(shù)', 1),
(4, 1, '劉謙魔術(shù)', 3),
(5, 0, '千術(shù)道具', 2),
(6, 5, '麻將牌九系列', 3),
(7, 5, '撲克系列', 1),
(8, 5, '色子系列', 5),
(9, 5, '變牌器系列', 4),
(10, 5, '高科技系列', 2);

樣式代碼

復(fù)制代碼 代碼如下:

<style type="text/css">
<!--
body{margin:0px;}
img{vertical-align:middle;}
.tab td{height:28px;font-size:13px;background-color:#FFFFFF;}
form{margin:0px;padding:0px;}
.edit,.del,.pointer{cursor:pointer;}
.ui-move{border:1px dashed #666;height:30px;}
.title{text-align:left;padding-left:7px;height:30px;font-size:13px;font-weight:bold;color:#444;}

ul,li{ margin:0px;padding:0px;}
.left_nav{margin:0px 10px 0 10px;padding-top:5px;font-size:14px;line-height:30px;}
.left_nav li{list-style-type:none;}
.nav{width:280px;list-style-type:none;text-align:left;}
.nav li span{margin:0 0px 0 10px;font-size:12px;}
/*==================二級(jí)目錄===================*/
.nav li ul{list-style:none;text-align:left;margin-top:4px;}
.nav li ul li{ text-indent:25px;border:none;/*二級(jí)目錄的背景色*/ margin:-7px 0 0 0;_margin:0px 0 8px 0;}
.navv li span{margin:0 0px 0 10px;font-size:12px;}
.f{vertical-align: middle;width:16px;height:16px;}
.nav div{display:none;}
-->
</style>

載入js文件及代碼

復(fù)制代碼 代碼如下:

<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(document).ready(function(){
  $("#mm").sortable({
    opacity: 0.5,
    cursor:'move',
    revert:true,
    handle:'.f',
    placeholder:'ui-move',
    update:function(){
      serial=$(this).sortable("serialize");
      $("#return").load("myRun/sort.php?"+serial);
    }
  });
  $("#mm div").sortable({
    opacity: 0.5,
    cursor:'move',
    revert:true,
    handle:'.t',
    placeholder:'ui-move',
    update:function(){
      serial=$(this).sortable("serialize");
      $("#return").load("myRun/sort.php?"+serial);
    }
  });
  $(".f").toggle(function(){
    if($(this).attr("src")=='images/plus.gif'){
      $("#mm").find(".f").attr("src","images/plus.gif");//將全部大類(lèi)前面的圖標(biāo)改為加號(hào)
      $("#mm").find("div").hide();//隱藏子類(lèi)
      $('div',$(this).parents('.nav:first')).show();//顯示當(dāng)前點(diǎn)擊大類(lèi)的子類(lèi)
      $(this).attr("src","images/nofollow.gif");//將當(dāng)前點(diǎn)擊的大類(lèi)前面的加號(hào)圖標(biāo)更改為減號(hào)圖標(biāo)
    }else{
      $(this).attr("src","images/plus.gif");
      $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first')+'.odd2').hide();
    }
  },function(){
    if($(this).attr("src")=='images/plus.gif'){
      $("#mm").find(".f").attr("src","images/plus.gif");
      $("#mm").find("div").hide();
      $('div',$(this).parents('.nav:first')).show();
      $(this).attr("src","images/nofollow.gif");
     }else{
      $(this).attr("src","images/plus.gif");
      $('div',$(this).parents('.nav:first')).hide();//$($(this).parents('div:first')+'.odd2').hide();
     }
  });
  //$('.odd2','table:first').hide();//初始化 隱藏主題分類(lèi)    <--改動(dòng)：在css中把子類(lèi)display:none。這樣可以直接顯示第一個(gè)。以前的效果是全部展開(kāi)，然后在全部隱藏，然后在顯示第一個(gè)。不太好看。
  $('#mm ul:first div').show();//顯示第一個(gè)主題分類(lèi)列表
  $('#mm ul:first .f').attr("src","images/nofollow.gif");//改變圖片為“-”狀
});
</script>

顯示代碼

復(fù)制代碼 代碼如下:

<div class="left_nav" id="mm">
<span style='display:none' id="menu_productclassify"></span>
<?php
//通過(guò)where條件來(lái)過(guò)濾子類(lèi)，僅顯示分類(lèi)（一級(jí)）
$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 '<ul id="menu_'.$arr[id].'" class="nav">';
    echo "<li id='nav_li'><img class=f src='images/plus.gif'>$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 "<div id='two_$arr[id]'><span style='display:none' id='menu_productclassify'></span>";
      while($arr2=mysql_fetch_array($query2)){
        echo "<ul id='menu_$arr2[id]' class='navv'>";
        echo "<li><img class=t src='images/nofollow.gif'>$arr2[name]</li>";
        echo "</ul>";
      }
      echo '</div>';
    }
    echo "</li></ul>";
  }
}else{
  echo '<li id="nav_li">暫無(wú)產(chǎn)品分類(lèi)</li>';
}
?>
</div>

排序操作sort.php

復(fù)制代碼 代碼如下:

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

關(guān)于怎么實(shí)現(xiàn)一個(gè)二級(jí)目錄拖拽排序功能問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。