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”, “”); }

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

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/115346.html原文链接：https://javaforall.cn

actionscript node.js 编程算法 ide javascript

0 人点赞