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));
//移动前：同级->在源节点当前拖拽时的前个元素变为最后元素图标切换
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>
Jquery实现可拖拽的树菜单的更多相关文章
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- jQuery插件（拖拽）
拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...
- jquery实现可拖拽的div
由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- jquery插件之拖拽
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...
- jQuery网页元素拖拽插件
效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...
- jquery 实现页面拖拽并保存到cookie
实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...
- Jquery.Sorttable 桌面拖拽自定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
随机推荐
- jQuery对的表单数据序列化和校验
jQuery对的表单数据序列化和校验 表单序列化 如果想让表单通过ajax异步提交,那么首先我们要通过js获取到每个表单中输入的值,如果表单项比较多的话,是一件很麻烦,很痛苦的事情,那么我们可以通过j ...
- 查找内容grep命令
标准unix/linux下的grep通过以下参数控制上下文 grep -C 5 foo file 显示file文件中匹配foo字串那行以及上下5行 grep -B 5 foo file 显示foo及前 ...
- 三、ansible简要使用
1.ansible服务器生成公钥与私钥 ssh-keygen -t rsa 2.拷贝ansible公钥到客户机上 ssh-copy-id -i root@192.168.1.1 3.添加主机到ansi ...
- CSU 1102 多连块拼图
多连块拼图 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 多连块是指由多个等大正方形边与边连接而成的平面连通图形. ———— 维基百科 ...
- Pandas DataFrame构造简析
参考书籍:<利用Python进行数据分析> DataFrame简介: DataFrame是一个表格型的数据结构,它含有一组有序的列,每列可以是不同的值类型(数值.字符串.布尔值等).Dat ...
- appium---【Mac】appium-doctor提示WARN：“fbsimctl cannot be found”解决方案
报错提示截图如下: 解决方案: brew tap facebook/fb brew install fbsimctl --HEAD 执行完命令重新运营appium-doctor即可看到成功已安装此包:
- 为nginx配置https并自签名证书
一.把证书准备好. 步骤与使用OpenSSL自签发服务器https证书所述大同小异.在这里再重复一次. 1.制作CA证书: ca.key CA私钥: openssl genrsa -des3 -out ...
- 解决序列化类型为“System.Reflection.RuntimeModule”的对象时检测到循环引用。
定义一个继承JavaScriptConverter的子类 public class DataTableConverter : JavaScriptConverter { /// <summary ...
- 使用cp命令时候递归的创建目标目录
在使用cp命令拷贝文件的时候,有时候会遇到这样的场景: 源文件:/a/b/c/e.txt 目标地址:/mnt/a/b/c/e.txt 而/mnt/a/b/c这个目录结构还没有创建.拷贝的时候还要求目录 ...
- enumerate()和map()函数用法
一.python enumerate用法 先出一个题目: 1.有一 list= [1, 2, 3, 4, 5, 6] 请打印输出: 0, 1 1, 2 2, 3 3, 4 4, 5 5, 6 打印输出 ...