Jquery实现可拖拽的树菜单「建议收藏」

大家好，又见面了，我是全栈君。

效果图例如以下所看到的：下载地址http://download.csdn.net/detail/javaquentin/8290417

<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;
        }

        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” }
    ]
}
        ];

        $(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; //是否拖拽至顶级节点

            //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;
            };

            //虚线和展开、收缩图标[初始化,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”;
                }
            }

            //根节点【isRootNode】首次载入推断
            var InitFirstIcon = function (jsonList, index) {
                //同级第一个元素图标
                if (index == 0) {
                    setting.switchClass = “switch_roots_close”;
                    setting.ulClass = “line”;
                }

                //本级文件夹仅仅有一项显示图标【jsonList为一个值时】
                if (jsonList.length == 1) {
                    setting.switchClass = “switch_root_close”;
                    setting.ulClass = “”;
                }
            };

            //切换图标[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”;

                //组合成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”, “”);
                        }

                            //涉及触发事件展开的问题
                            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));

                                //根顶部图标移动后。下个元素变为顶部元素
                                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>