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" οnclick="" target="_blank" ><input type="button" title="ico" class="' + fileClass + '" id="treeDemo_' + treeId + '_ico" οnfοcus="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实现可拖拽的树菜单相关推荐
- html许愿墙源码,jQuery实现可拖拽的许愿墙效果
这篇文章主要介绍了jQuery实现可拖拽的许愿墙效果,可实现拖拽图片与层叠显示功能,涉及jQuery插件的简单使用,并附带demo源码供读者下载参考,需要的朋友可以参考下 本文实例讲述了jQuery实 ...
- html5图片拖拽删除,基于jquery插件实现拖拽删除图片功能
本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下 实现以下效果 完全拖出这个层,图片会消失,否则图片会回到原来的位置 #mydiv{ width:900px ...
- jquery实现盒子拖拽
这篇文章主要为大家详细介绍了jquery实现盒子拖拽动画效果,文,感兴趣的小伙伴们可以参考一下 核心代码部分 <script src="js/jquery-1.11.1.js" ...
- html手机模块化,jQuery 移动端拖拽（模块化开发，触摸事件，webpack）
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
- 表格拖拽、树状拖拽的各种方法
一.简单的表格拖拽 1.sortablejs 地址:https://www.itxst.com/sortablejs/neuinffi.html 配置项: http://www.sortablejs. ...
- jquery实现表格拖拽排序
1.引入:jQuery文件和jquery-ui.js <script src="@{'/public/javascripts/jquery-1.11.1.min.js'}" ...
- jquery的sortable拖拽排序插件，顺序没发生改变则不请求
一.前言 前几天刚做完排序,本来以为没什么问题的,结果今天被告知要优化一下..功能上是没问题,但是有一些小细节需要优化.比如我做的是每次拖拽完成之后,都在stop方法里面请求ajax保存顺序.但是要考 ...
- Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
最新文章
- Vue_双向绑定解析以及指令介绍
- 一文带你学C语言，详细知识点思维导图！
- ROS2学习（八）.ROS概念 - ROS 2接口（Ros2 interface）
- [react] 在React中怎么将参数传递给事件？
- 毫秒级百万数据分页存储过程
- 给.net初学者的一些建议(共勉之)[转载]
- 13个VSCode使用技巧，开启高效的开发模式
- 帝豪gl车机系统降级_何以剑指合资？帝豪GL/英朗底盘对比
- Visual C# 2008+SQL Server 2005 数据库与网络开发――3.1.3 C# 2008和.NET Framework 3.5的关系...
- 数据库镜像怎么还原数据库_如何创建数据库镜像
- php mixed约束,Mixed Content: 混合被动/显示内容和混合活动内容
- 机器面试-处理分类问题
- 数学基础知识02——常用积分公式
- Vue不同用户权限显示不同内容
- Mysql数据库主主从设置
- Linux中wget、yum与apt-get用法及区别
- Excel身份证号码判断男女性别：Excel函数不求人
- hdu 6053 TrickGCD
- Linux下4个查找命令which、whereis、locate、find的使用与区别
- BUUCTF 认真你就输了