Jquery實現可拖拽的樹菜單

時間  2019-11-16
標籤 jquery 實現 菜單 欄目 JQuery 简体版
原文   原文鏈接

效果圖例如如下所看到的：下載地址http://download.csdn.net/detail/javaquentin/8290417javascript


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jquery 可拖拽樹</title>
    <link href="zTreeStyle.css" rel="stylesheet" />
    <style type="text/css">
        .dragingNode {
            z-index: 10000;
            background: #CCC;
            border: 1px #00B83F dotted;
            color: #333;
            font-size: 12px;
            text-align:center;
            font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;
            position: absolute;
        }css

        div a input {
            width: 18px;
            height: 18px;
            padding: 0;
            margin: 0;
            vertical-align: middle;
            border: 0 none;
            background-color: transparent;
            background-repeat: no-repeat;
            background-position: 0 0;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        var Lists = [
{
    title: "主頁", code: "000", href: "ConsumerCategories/ConsumerCategories.aspx", img: "../images/index-nav-img-0.gif"
    , Link: [{
        title: "消費類別", code: "001", href: "ConsumerCategories/ConsumerCategories.aspx",
        Link: [ { title: "消別2", code: "012", href: "ConsumerCategories/ConsumerCategories.aspx" }]
    },
           { title: "消費", code: "002", href: "ConsumerCategories/ConsumerCategories.aspx" }
    ]
}
, {
    title: "收支模塊", code: "100", href: "OutCome/OutCome.aspx", img: "../images/index-nav-img-1.gif",
    Link: [{ title: "支出功能", code: "101", href: "OutCome/OutCome.aspx" }
    , { title: "支出列表", code: "102", href: "OutCome/OutComeList.aspx" }
    , { title: "月消費圖", code: "103", href: "OutCome/OutComeChart.aspx" }
    , { title: "easyUI", code: "104", href: "OutCome/OutComeQuery.aspx" }
    ]
}
, {
    title: "收入模塊", code: "200", href: "InCome/InCome.aspx", img: "../images/index-nav-img-3.gif",
    Link: [{ title: "收入功能", code: "201", href: "InCome/InCome.aspx" }
    , { title: "收入列表", code: "202", href: "InCome/InComeList.aspx" }
    , { title: "測試列表", code: "203", href: "InCome/Demo.aspx" }
    ]
}
, {
    title: "類別模塊", code: "300", href: "Class/List.aspx", img: "../images/index-nav-img-2.gif",
    Link: [{ title: "分類加入", code: "301", href: "Class/Add.aspx" }
    , { title: "分類管理", code: "302", href: "Class/List.aspx" }
    ]
}
, {
    title: "模版模塊", code: "400", href: "Manage/Temple.aspx", img: "../images/index-nav-img-4.gif",
    Link: [{ title: "系統模板管理", code: "401", href: "Manage/Temple.aspx" }
    , { title: "本身定義標籤添加", code: "402", href: "Tag/Add.aspx" }
    , {
        title: "消別1", code: "011", href: "ConsumerCategories/ConsumerCategories.aspx",
        Link: [{ title: "消別11", code: "111", href: "ConsumerCategories/ConsumerCategories.aspx" },
            { title: "消別12", code: "112", href: "ConsumerCategories/ConsumerCategories.aspx" }
        ]
    }
    ,{ title: "本身定義標籤管理", code: "403", href: "Tag/List.aspx" }
    ]
}
, {
    title: "表單管理", code: "500", href: "Form/FBList.aspx", img: "../images/index-nav-img-5.gif",
    Link: [{ title: "評論管理", code: "501", href: "Form/FBList.aspx" }
    , { title: "報名管理", code: "502", href: "Form/BmList.aspx" }
    , {
        title: "表單回覆管理", code: "503", href: "Form/RList.aspx",
        Link: [{ title: "表單管理", code: "504", href: "Form/List.aspx" }
        , { title: "表單加入", code: "505", href: "Form/Add.aspx" }
        ]
    }
    ]
}
, {
    title: "系統管理", code: "600", href: "Manage/SysConfig.aspx", img: "../images/index-nav-img-6.gif",
    Link: [{ title: "系統參數設置", code: "601", href: "Manage/SysConfig.aspx" }
    , { title: "管理員管理", code: "602", href: "Manage/AdminList.aspx" }
    , { title: "password改動", code: "603", href: "Manage/Pwadd.aspx" }
    , { title: "操做日誌", code: "604", href: "Manage/LogList.aspx" }
    , { title: "菜單管理", code: "605", href: "Manage/MenuLink.aspx" }
    ]
}
        ];html

        $(document).ready(function () {
   
            //用Json的方式設置定義參數
            var setting = {
                //組合而成的html代碼
                treeString: "",
                //是否爲首節點
                isRootNode: true,
                //+、-交互button
                switchClass: "",
                //頂級文件夾的豎虛線
                ulClass: "",
                //文件、目錄圖標
                fileClass: "",
                //定義是否顯示子文件夾
                isDisplay: "display:block",
                //開始座標
                startAxisX: 0,
                startAxisY: 0,
                //移動座標
                moveAxisX: 0,
                moveAxisY: 0,
                //最小移動距離
                MinMoveSize: 5
            };
            var SwitchBool = false;     //拖拽時推斷當前節點是否展開狀態
            var isDrageToRoot = false;  //是否拖拽至頂級節點java


            //1.樹Html初始化
            var InitTreeHtml = function (treeId, treeTitle, treeHref, treeImg, switchClass, fileClass) {
                var TreeHtml = '<li class="tree-node" id="treeDemo_' + treeId + '_li"><input type="button" title="switch" class="' + switchClass + '" id="treeDemo_' + treeId + '_switch" /><a id="treeDemo_' + treeId + '_a" onclick="" target="_blank" ><input type="button" title="ico" class="' + fileClass + '" id="treeDemo_' + treeId + '_ico" onfocus="this.blur();"/><span id="treeDemo_' + treeId + '_span">' + treeTitle + '</span></a>';               
                return TreeHtml;
            };node

            //虛線和展開、收縮圖標[初始化,jsonList:json數據,index:索引,initClass:初始化圖標]
            var InitIcon = function (jsonList, index, initClass, isFirstNode) {
                if (index + 1 == jsonList.length) {
                    if (jsonList.length == 1 && isFirstNode == true) {
                        //整個樹僅僅有一個節點的狀況【特殊】
                        setting.switchClass = "";
                    } else {
                        //同級最後一個元素圖標
                        setting.switchClass = "switch_bottom_" + initClass;
                    }
                    setting.ulClass = "";
                } else {
                    //同級中間元素圖標
                    setting.switchClass = "switch_center_" + initClass;
                    setting.ulClass = "line";
                }
            }jquery

            //根節點【isRootNode】首次載入推斷
            var InitFirstIcon = function (jsonList, index) {
                //同級第一個元素圖標
                if (index == 0) {
                    setting.switchClass = "switch_roots_close";
                    setting.ulClass = "line";
                }json

                //本級文件夾僅僅有一項顯示圖標【jsonList爲一個值時】
                if (jsonList.length == 1) {
                    setting.switchClass = "switch_root_close";
                    setting.ulClass = "";
                }
            };app

            //切換圖標[beforeIcon:曾經圖標,thisIcon:當前圖標]
            var InteractiveIcon = function ($this, beforeIcon, thisIcon) {
                if ($this.attr("class") == "switch_roots_" + beforeIcon) {
                    $this.attr("class", "switch_roots_" + thisIcon);
                } else if ($this.attr("class") == "switch_bottom_" + beforeIcon) {
                    $this.attr("class", "switch_bottom_" + thisIcon);
                } else if ($this.attr("class") == "switch_root_" + beforeIcon) {
                    $this.attr("class", "switch_root_" + thisIcon);
                } else if ($this.attr("class") == "switch_center_" + beforeIcon) {
                    $this.attr("class", "switch_center_" + thisIcon);
                }
            };
           
            //實現樹節點的隱藏與顯示
            function HideShowNode(switchNodeId) {
                //獲取節點Id轉換爲對象
                thisObject = $("#" + switchNodeId);
                var currentDrageNodeId = switchNodeId.substring(0, switchNodeId.length - 7);
                var icoNodeId = "#" + currentDrageNodeId + "_ico";
    //目錄圖標打開與關閉
                var UlNodeId = "#" + currentDrageNodeId + "_ul";                ide

                //組合成ul爲實現隱藏與顯示
                if ($(UlNodeId).is(":hidden")) {
                    //切換圖標
                    InteractiveIcon(thisObject, "close", "open");
                    if ($(icoNodeId).attr("class") == "ico_close") {
                        $(icoNodeId).attr("class", "ico_open");
                    }優化

                    //滑入
                    $(UlNodeId).slideDown("fast");
                } else {
                    //切換圖標
                    InteractiveIcon(thisObject, "open", "close");
                    if ($(icoNodeId).attr("class") == "ico_open") {
                        $(icoNodeId).attr("class", "ico_close");
                    }

                    //滑出
                    $(UlNodeId).slideUp("fast");
                }
            }

            //觸發器實現節點的隱藏與顯示
            function HideShowTrigger($switchId) {
                var strSwitchId = $switchId.substring(1, $switchId.length);
                $($switchId).bind("myEvent", function (event, messageObject) {
                    HideShowNode(messageObject);
                });
                $($switchId).trigger("myEvent", [strSwitchId]);

                //避免事件被屢次綁定
                $($switchId).unbind("myEvent");
            }

            //當前節點在移動後按其原來的樣式顯示【原來是展開就展開，收縮則收縮】
            function CurrentNodeExpandContract($switchId) {
                if (SwitchBool) {
                    HideShowTrigger($switchId);
                    SwitchBool = false;
                }
            }

            //拖拽切換文件、目錄圖標
            function DragingInteractiveIcon(drageNodeClass, switchId, ulId, status) {
                //1.源根節點 2.目標當前父節點  3.源上個節點  4.目標上個節點  5.目標當前節點  6.源父節點
                switch (drageNodeClass) {
                    case "switch_root_open":
                        //4
                        if (status == "targetPrevNode") {
                            $(switchId).attr("class", "switch_roots_open");
                            $(ulId).attr("class", "line");
                        }

                        //6
                        if (status == "sourceParentNode") {
                            $(switchId).attr("class", "switch_roots_docu");
                        }
                       
                        break;
                    case "switch_root_close":
                        //4[不會運行。因爲根節點爲一個時不多是關閉狀態]
                        if (status == "targetPrevNode") {
                            $(switchId).attr("class", "switch_roots_close");
                            $(ulId).attr("class", "line");
                        }

                        //6
                        if (status == "sourceParentNode") {
                            $(switchId).attr("class", "switch_roots_docu");
                        }

                        break;
                    case "switch_roots_open":
                        //3
                        if (status == "sourcePrevNode") {
                            $(switchId).attr("class", "switch_root_open");
                            $(ulId).attr("class", "");
                        }
                       
                        //6
                        if (status == "sourceParentNode") {
                            $(switchId).attr("class", "switch_roots_docu");
                        }

                        break;
                    case "switch_roots_close":
                        //2
                        if (status == "targetCurrentParentNode") {                                                    
                            //涉及觸發事件展開的問題
                              HideShowTrigger(switchId);
                            $(ulId).attr("class", "line");
                        }

                        //3
                        if (status == "sourcePrevNode") {
                            $(switchId).attr("class", "switch_root_close");
                            $(ulId).attr("class", "");
                        }

                        //5
                        if (status == "targetCurrentNode") {
                            $(switchId).attr("class", "switch_bottom_close");
                            $(ulId).attr("class", "");

                            //涉及觸發事件展開的問題
                            CurrentNodeExpandContract(switchId);                           
                        }
                       
                        //6
                        if (status == "sourceParentNode") {
                            $(switchId).attr("class", "switch_roots_docu");
                        }

                        break;
                    case "switch_roots_docu":
                        //2
                        if (status == "targetCurrentParentNode") {
                            $(switchId).attr("class", "switch_roots_open");
                            $(ulId).attr("class", "line");
                        }

                        //5
                        if (status == "targetCurrentNode") {
                            $(switchId).attr("class", "switch_bottom_docu");
                        }

                        break;
                    case "switch_center_open":
                        //1
                        if (status == "sourceRootNextNode") {
                            $(switchId).attr("class", "switch_roots_open");
                        }

                        //3
                        if (status == "sourcePrevNode") {
                            $(switchId).attr("class", "switch_bottom_open");
                            $(ulId).attr("class", "");
                        }

                        //5
                        if (status == "targetCurrentNode") {
                            $(switchId).attr("class", "switch_bottom_open");
                            $(ulId).attr("class", "");
                        }

                        //6
                        if (status == "sourceParentNode") {
                            $(switchId).attr("class", "switch_center_docu");
                        }
                        break;
                    case "switch_center_close":
                        //1
                        if (status == "sourceRootNextNode") {
                            $(switchId).attr("class", "switch_roots_close");
                        }

                        //2
                        if (status == "targetCurrentParentNode") {
                            //涉及觸發事件展開的問題
                            HideShowTrigger(switchId);
                            $(ulId).attr("class", "line");
                        }
                       
                        //3
                        if (status == "sourcePrevNode") {
                            $(switchId).attr("class", "switch_bottom_close");
                            $(ulId).attr("class", "");
                        }

                        //5
                        if (status == "targetCurrentNode") {
                            $(switchId).attr("class", "switch_bottom_close");
                            $(ulId).attr("class", "");

                            //涉及觸發事件展開的問題
                            CurrentNodeExpandContract(switchId);                           
                        }

                        //6
                        if (status == "sourceParentNode") {
                            $(switchId).attr("class", "switch_center_docu");
                        }
                        break;
                    case "switch_center_docu":
                        //1
                        if (status == "sourceRootNextNode") {
                            $(switchId).attr("class", "switch_roots_docu");
                        }

                        //2
                        if (status == "targetCurrentParentNode") {
                            $(switchId).attr("class", "switch_center_open");
                            $(ulId).attr("class", "line");
                        }
                       
                        //3
                        if (status == "sourcePrevNode") {
                            $(switchId).attr("class", "switch_bottom_docu");
                        }

                        //5
                        if (status == "targetCurrentNode") {
                            $(switchId).attr("class", "switch_bottom_docu");
                        }
                        break;
                    case "switch_bottom_open":
                        //1
                        if (status == "sourceRootNextNode") {
                            $(switchId).attr("class", "switch_root_open");
                            $(ulId).attr("class", "");
                        }
                       
                        //4
                        if (status == "targetPrevNode") {
                            $(switchId).attr("class", "switch_center_open");
                            $(ulId).attr("class", "line");
                        }

                        //6
                        if (status == "sourceParentNode") {
                            $(switchId).attr("class", "switch_bottom_docu");
                        }
                        break;
                    case "switch_bottom_close":
                        //1
                        if (status == "sourceRootNextNode") {
                            $($nextSourceSwitchId).attr("class", "switch_root_close");
                            $($nextSourceUlId).attr("class", "");
                        }
                       
                        //2
                        if (status == "targetCurrentParentNode") {
                            //涉及觸發事件展開的問題
                            HideShowTrigger(switchId);
                        }

                        //4
                        if (status == "targetPrevNode") {
                            $(switchId).attr("class", "switch_center_close");
                            $(ulId).attr("class", "line");
                        }

                        //5
                        if (status == "targetCurrentNode") {
                            //涉及觸發事件展開的問題
                            CurrentNodeExpandContract(switchId);                           
                        }

                        //6
                        if (status == "sourceParentNode") {
                            $(switchId).attr("class", "switch_bottom_docu");
                        }

                        break;
                    case "switch_root_docu":
                        //2
                        if (status == "targetCurrentParentNode") {
                            $(switchId).attr("class", "switch_root_open");
                            $(ulId).attr("class", "");
                        }

                        break;
                    case "switch_bottom_docu":
                        //1
                        if (status == "sourceRootNextNode") {
                            $(switchId).attr("class", "switch_root_docu");
                        }


                        //2
                        if (status == "targetCurrentParentNode") {
                            $(switchId).attr("class", "switch_bottom_open");
                            $(ulId).attr("class", "");
                        }

                        //4
                        if (status == "targetPrevNode") {
                            $(switchId).attr("class", "switch_center_docu");
                        }

                        break;
                }               


            }

            //拖拽至頂級節點推斷
            function DragingToRoot(rootUlId, event, sourceParentUlId) {
                var offset = $(rootUlId).offset();
                var ulWidth = $(rootUlId).width();
                var ulHeight = $(rootUlId).height();

                if ((((offset.left + ulWidth - 10) < event.pageX) && (event.pageX < (offset.left + ulWidth))) && ((offset.top < event.pageY) && (event.pageY < (offset.top + ulHeight))) && sourceParentUlId != "treeDemo") {
                    //爲頂級文件夾拖拽至頂級不顯示樣式,【即頂級不能再拖拽至頂級】
                    $(rootUlId).css({ "background-color": "#D2E9FF" });
                    isDrageToRoot = true;
                } else {
                    $(rootUlId).css({ "background-color": "white" });
                    isDrageToRoot = false;
                }
            }


            //拖拽優化整合
            function DragingIconIntegrate(nodeId,nodeType) {
                var $nodeSwitchId = "#" + nodeId + "_switch";
                var $nodeUlId = "#" + nodeId + "_ul";
                if (nodeType == "sourceParentNode") {
                    $nodeUlId = "";
                }               
                var nodeClass = $($nodeSwitchId).attr("class");
                DragingInteractiveIcon(nodeClass, $nodeSwitchId, $nodeUlId, nodeType);
            }


            var InitTreeView = function (jsonList, isFirstNode) {
                $.each(jsonList, function (index, term) {

                    if (!jsonList) return;

                    if (term.Link) {
                        ///圖標載入
                        //1.當有子節點時圖標關閉狀態
                        InitIcon(jsonList, index, "close", isFirstNode);
                        //2.首節點
                        if (isFirstNode == true) {
                            //載入同級首節點的推斷
                            InitFirstIcon(jsonList, index);
                        }
                        //3.有子節點爲目錄圖標
                        setting.fileClass = "ico_close";


                        setting.treeString += InitTreeHtml(term.code, term.title, term.href, term.img, setting.switchClass, setting.fileClass);


                        isFirstNode = false;
                        setting.isDisplay = "display:none;";
                        setting.treeString += '<ul class="' + setting.ulClass + '" id="treeDemo_' + term.code + '_ul" style="' + setting.isDisplay + '">';

                        //遞歸尋找子文件夾
                        InitTreeView(term.Link, isFirstNode);

                        setting.treeString += '</ul>';
                    } else {
                        ///圖標載入
                        //1.無子節點爲文件圖標
                        setting.fileClass = "ico_docu";
                        //2.最後子節點時顯示文件圖標
                        InitIcon(jsonList, index, "docu", isFirstNode);

                        setting.treeString += InitTreeHtml(term.code, term.title, term.href, term.img, setting.switchClass, setting.fileClass);
                    }

                    setting.treeString += '</li>';
                });
                return setting.treeString;
            };

            //2.初始化Tree文件夾【Main】
            var TreeView = InitTreeView(Lists, setting.isRootNode);
            $("#treeDemo").append(TreeView);

            //3.事件模塊【Event】
            //單擊隱藏與顯示列表
            $('input[title="switch"]').click(function () {
                var $this = $(this);
                //獲取單擊button中的Id
                var SwitchNodeId = $this.attr("id");

                HideShowNode(SwitchNodeId);
            });           

            //單擊a標籤Dragging
            //實現思想：1.單擊<a>標籤時將<li>追加至<div> 2.<div>實現移動  3.釋放時remove<div>
            //實現方法:1.mousedown 2.mousemove 3.mouseover 4.mouseup
            var currentAId="";
            var ZTreeMask = "";
            var $currentAId = "";
            var curentParentAId = "";
            var currentDrageNodeId = "";
            var currentDrageLiId = "";
            var currentDrageSwitchId = "";           

            $("a").mousedown(function (event) {
                currentAId = $(this).attr("id");
                $currentAId = "#" + currentAId;
                curentParentAId = $($currentAId).parent().parent().prev().attr("id");  //獲取當前節點的父節點
                currentDrageNodeId = currentAId.substring(0, currentAId.length - 2);
                currentDrageLiId = "#" + currentDrageNodeId + "_li";
                currentDrageSwitchId = "#" + currentDrageNodeId + "_switch";

                //當前拖拽節點存在返回,可不要以防程序出現bug
                if ($("#zTreeMask_" + currentDrageNodeId).length > 0) return; 

                setting.startAxisX = event.clientX;
                setting.startAxisY = event.clientY;               

                //追加拖拽div
                ZTreeMask = "<div id='zTreeMask_" + currentDrageNodeId + "' class='dragingNode' style='top:" + setting.startAxisY + "px; left:" + setting.startAxisX + "px; width:" + $(this).width() + "px; height:" + $(this).height() + "px;'></div>";

                //單擊樹節點選中
                $("a").removeClass("curSelectedNode");
                $(this).attr("class", "curSelectedNode");
                               
            }).mouseover(function (e) {
                if ($(this).attr("class") != "curSelectedNode") {
                    $(this).attr("class", "tmpTargetTree");
                }
            }).mouseout(function (e) {
                $(this).removeClass("tmpTargetTree");
            });
           

            var Bool = false;
            var tmpDragingNode = "";
            //拖拽時推斷當前節點是否展開狀態
            $(document).mousemove(function (event) {
                //除掉默認事件，防止文本被選擇
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

                //節點拖拽移動的距離
                setting.moveAxisX = event.pageX - setting.startAxisX;
                setting.moveAxisY = event.pageY - setting.startAxisY;

                //避免鼠標誤操做，對於第一次移動小於MinMoveSize時，不開啓拖拽功能
                if (setting.moveAxisX < setting.MinMoveSize && setting.moveAxisY < setting.MinMoveSize) {
                    return;
                }

                //推斷鼠標是否按下event.which==1在ie中不兼容 右鍵不能拖動NOT DO【更改成Bool推斷】
                if (Bool) {                  
                    if ($("#zTreeMask_" + currentDrageNodeId).length == 0 && currentDrageNodeId != "") {
                        $("body").append(ZTreeMask);
                        $("#zTreeMask_" + currentDrageNodeId).append($($currentAId).clone());

                        //推斷當前拖拽的節點爲展開目錄則先把目錄收縮再拖拽【觸發器實現】
                        var currentDrageIcoId = "#" + currentDrageNodeId + "_ico";
                        currentDrageSwitchId = currentDrageNodeId + "_switch";
                        if ($(currentDrageIcoId).attr("class") == "ico_open") {
                            HideShowTrigger("#" + currentDrageSwitchId);

                            SwitchBool = true;
                        }

                    }

                    //拖拽移動的距離
                    $("#zTreeMask_" + currentDrageNodeId).css({ "left": setting.startAxisX + setting.moveAxisX + "px", "top": setting.startAxisY + setting.moveAxisY + "px" });

                    //拖拽的目標節點
                    if ($("#zTreeMask_" + currentDrageNodeId).length > 0) {
                        //綁定mouseover事件，鼠標鍵mouseup時要unbind（mouseover）
                        $("a").mouseover(function (e) {
                                                       
                            tmpDragingNode = $(this).attr("id");
                            //推斷當移動目標父節點爲自己源節點則不顯示樣式,目標父節點置爲空
                            $(this).addClass("tmpTargetNode");                       

                        }).mouseout(function (e) {
                            $(this).removeClass("tmpTargetNode");
                        });
                    }                   
                   

                    //目標拖動至頂級節點【頂級拖拽至頂級不顯示】顯示樣式,推斷下級拖動至上級成爲頂級節點【******】
                    var currentParentUlId = $(currentDrageLiId).parent().attr("id");
                    DragingToRoot("#treeDemo", event, currentParentUlId);                   

                };                              

            }).mousedown(function (e) {
                Bool = true;               
            }).mouseup(function (e) {
                Bool = false;
                if ($("#zTreeMask_" + currentDrageNodeId).length > 0) {
                    //釋放移除暫時拖動的節點
                    $("#zTreeMask_" + currentDrageNodeId).fadeOut().remove();

                    //源節點拖拽至目標節點代碼 
                    //移上的節點加子節點
                    var tmpDragingNodeString = tmpDragingNode.substring(0, tmpDragingNode.length - 2);
                    var tmpDragingNodeSwitchId = tmpDragingNodeString + "_switch";
                    var tmpDragingNodeIcoId = tmpDragingNodeString + "_ico";
                    var tmpDragingNodeAId = tmpDragingNodeString + "_a";
                    var tmpDragingNodeUlId = tmpDragingNodeString + "_ul";

                    //獲取當前拖拽的Li的父文件夾Ul
                    var currentParentUlId = $(currentDrageLiId).parent().attr("id");

                    if ((tmpDragingNode == currentAId || tmpDragingNode == "") && isDrageToRoot==false ) {
                        //暫時移動目標節點爲本身Id或爲空不移動,【釋放後原來是展開的仍展開，收縮的仍收縮】
                        CurrentNodeExpandContract("#" + tmpDragingNodeSwitchId);

                    } else {                                                                                             
                        //移動前：同級->在源節點當前拖拽時的前個元素下的switch圖標更改                       
                        var currentParentNodeId = currentParentUlId.substring(0, currentParentUlId.length - 3);                       
                        var currentDrageSwitchClass1 = $("#" + currentDrageSwitchId).attr("class");

                        //在此同級上添加屬性。以供後面推斷。以避免last會把其下的所有一樣元素都會算上
                        $(currentDrageLiId).siblings("li").attr("title", "sibling");

                        var prevSourceLiId = $(currentDrageLiId).prev().attr("id");
                        var nextSourceLiId = $(currentDrageLiId).next().attr("id");                       
                       
                        if (isDrageToRoot) {
                            //子節點移至根節點實現
                            tmpDragingNodeUlId = "treeDemo";
                            $("#" + tmpDragingNodeUlId).append($(currentDrageLiId));

                            //移動前：同級->在源節點當前拖拽時的前個元素變爲最後元素圖標切換
                            var currentMoveLastLiId = "";
                            if (currentParentUlId) {
                                //獲取同級最後一個元素 【沒有最後元素的話父節點圖標變空】要節點爲treeDemo
                                currentMoveLastLiId = $('#' + currentParentUlId + ' li[title="sibling"]:last').attr("id");
                            }
                           
                        } else {
                            //推斷不存在則UL追加
                            if ($("#" + tmpDragingNodeUlId).length == 0) {
                                var tmpDragingNodeUl = '<ul class="tree-node" id="' + tmpDragingNodeUlId + '"></ul>';
                                $("body").append(tmpDragingNodeUl);
                            }

                            //追加移動節點至ul並追加至要移上的節點
                            $("#" + tmpDragingNodeUlId).append($(currentDrageLiId)).insertAfter($("#" + tmpDragingNodeAId));


                            //移動前：同級->在源節點當前拖拽時的前個元素變爲最後元素圖標切換
                            var currentMoveLastLiId = "";
                            if (currentParentUlId) {
                                //獲取同級最後一個元素 【沒有最後元素的話父節點圖標變空】要節點爲treeDemo
                                currentMoveLastLiId = $('#' + currentParentUlId + ' li[title="sibling"]:last').attr("id");

                                //根頂部圖標移動後。下個元素變爲頂部元素
                                if (currentParentUlId == "treeDemo" && (currentDrageSwitchClass1 == "switch_roots_open" || currentDrageSwitchClass1 == "switch_roots_close" || currentDrageSwitchClass1 == "switch_roots_docu") && nextSourceLiId) {
                                    var nextSourceNodeId = nextSourceLiId.substring(0, nextSourceLiId.length - 3);
                                    var $nextSourceLiId = "#" + nextSourceLiId;
                                    DragingIconIntegrate(nextSourceNodeId, "sourceRootNextNode");
                                }
                            }

                            //移動後:目標父節點切換圖標、目錄圖標【不能移入自身的子節點Bug,移動時收起】                           
                            var $tmpDragingNodeIcoId = "#" + tmpDragingNodeIcoId;                           
                            var dragNodeAInput = $("#" + tmpDragingNodeIcoId).attr("class");
                            DragingIconIntegrate(tmpDragingNodeString, "targetCurrentParentNode");
                            if (dragNodeAInput == "ico_close" || dragNodeAInput == "ico_docu") {
                                $($tmpDragingNodeIcoId).attr("class", "ico_open");
                            }
                           

                            //3.[原來]

                        }

                        //3.[原來]    
                        //同：移動後前個元素爲最後一個元素才推斷
                        if (prevSourceLiId && prevSourceLiId == currentMoveLastLiId) {
                            var prevSourceNodeId = prevSourceLiId.substring(0, prevSourceLiId.length - 3);
                            var $prevSourceLiId = "#" + prevSourceLiId;                          
                            DragingIconIntegrate(prevSourceNodeId, "sourcePrevNode");

                        } else {
                            //當前拖拽節點後，推斷當前文件夾下是否有子節點。沒有則父節點變爲文件圖標【拖至自己父節點下不改變圖標】
                            if (currentParentNodeId != tmpDragingNodeString) {
                                if (!currentMoveLastLiId) {
                                    var currentParentIcoId = "#" + currentParentNodeId + "_ico";
                                    var currentParentIcoClass = $(currentParentIcoId).attr("class");
                                    DragingIconIntegrate(currentParentNodeId, "sourceParentNode");

                                    if (currentParentIcoClass == "ico_open" || currentParentIcoClass == "ico_close") {
                                        $(currentParentIcoId).attr("class", "ico_docu");
                                    }

                                }
                            }                           

                        }

                        //同：移動後：同級->移動目標節點後前個元素下的switch圖標更改
                        var prevTargetLiId = $(currentDrageLiId).prev().attr("id");
                        if (prevTargetLiId) {
                            var prevTargetNodeId = prevTargetLiId.substring(0, prevTargetLiId.length - 3);
                            var $prevTargetLiId = "#" + prevTargetLiId;                          
                            DragingIconIntegrate(prevTargetNodeId, "targetPrevNode");
                        }

                        //同：2.推斷當前節點爲打開狀態移入時也爲打開狀態
                        //當前的節點爲文件最後切換圖標【推斷爲目錄要加入收縮展開圖標 DONE】
                        DragingIconIntegrate(currentDrageNodeId, "targetCurrentNode");

                    }                   

                    //移除事件。否則鼠標移上節點又顯示原來拖拽時的樣式 【移動後(移除)再移上鼠標不能顯示樣式bug NOTDO】
                    $("a").unbind("mouseover").unbind("mouseout");

                    //更新XML文檔  【推斷當沒有移動時不更新】
                    var sourceParentId = currentParentNodeId.substring(9);
                    var targetParentId = tmpDragingNodeString.substring(9);
                    var currentDrageId = currentDrageNodeId.substring(9);
                }


                //清除空白處拖拽再次顯示
                  currentDrageNodeId = "";
                //移動目錄的同一時候移除樣式
                  $("a").removeClass();                //$("a").removeClass("tmpTargetNode");
                  $("li").removeAttr("title");         //清空推斷更改圖標時的屬性
                 

            });

        });
    </script>
</head>
<body>   
    <form id="form1">
        <div >
            <ul class="tree" id="treeDemo" style="width:200px;"></ul>
        </div> 
        <label id="Label1"></label>
    </form>
</body>
</html>



相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程