jQuery的实现版仿窗子文件新建和拖拽功能的实现代码

前面的话：zTree是一个依靠框架实现的多功能"树插件"。优异的性能、灵活的配置、多种功能的组合是实现版最大优点。专门适合项目开发，尤其是树状菜单、树状数据。

实现版官方文档：http://www.treejs.cn/v3/api.php

想要实现的效果：

需要的功能：

1:首先实现一颗框架的实现版的树形菜单，这个很简单，直接引用官方文档即可2:点击新建组的按钮，会出现一个投入对话框，填写想要新建的名称，在树形菜单上添加了一个父节点菜单。3:可以把其他父节点里面的子节点元素拖动到刚刚新建的父节点里面。

下面开始撸代码：

1:首先要引入一些必要的文件，可自己在官方文档里面下载。

！-树形菜单- link rel='样式表href='././common/z tree/CSS/ztree样式/z tree样式。CSS ' rel='外部无跟随'脚本类型=' text/JavaScript ' src=' http :/./js/jquery-1。9 .1 .js//脚本脚本src=' http :/./common/z tree/js/jquery。z树。全部。量滴js '/脚本2:html界面，有新建组的按钮和盛放树形菜单的容器，还有填写文件名的投入框以及提交按钮。

div class=' ' div '按钮id='add '新建组/button/div ul id=' z tree ' class=' z tree '/ul/div id=' add group ' style=' display : none '输入类型=' text ' id=' group ' name=' group '按钮id=' submit '提交/button /div /div3:css，这里的钢性铸铁样式是自己对于官方文档的一些修改，放了一些必要的图标，更加的生动形象。

# add { width:80px高度：30 px背景技术# 2299 eecolor : # ffffffborder : none margin-top :10 px；边距-底部：10 px}.z树李跨度。按钮。icon 01 _ ico _ close { margin-right : 2px；背景：网址(././images/ztree/close.png)无重复滚动0 0透明；垂直对齐： 顶部；*垂直对齐： 中间}。z树李跨度。按钮。icon 01 _ ico _ open { margin-right : 2px；背景：网址(././images/ztree/open.png)无重复滚动0 0透明；垂直对齐： 顶部；*垂直对齐： 中间}。z树李跨度。按钮。icon 02 _ ico _ docu { margin-right : 2px；背景：网址(././images/ztree/woman.png)无重复滚动0 0透明；垂直对齐： 顶部；*垂直对齐： 中间}。z树李跨度。按钮。icon 03 _ ico _ docu { margin-right : 2px；背景：网址(././images/ztree/man.png)无重复滚动0 0透明；垂直对齐： 顶部；*垂直对齐： 中间}4:重点在于js，主要分为初始化实现版功能；添加分组功能；实现版结构设置功能；

$(function(){ var ZtreeObj；//初始化z树initTree()；函数initTree() { $ .get(path() '/ztree/init '，函数(数据){对于(数据中的var I){ if(数据[I]).令牌=='3 ')数据[i].nocheck=true} ztreeObj=$。fn。ztree。init($(' # ztree ')，设置，数据);});} //点击显示div $('#add ').单击(function() { $('#addgroup ')).show()；}) //添加分组$(“# submit”).单击(函数(){ $).Ajax({ URL : path()'/z tree/group/' $(' # group ').val()，键入： '岗位'，成功：函数(数据){ $('#addgroup ').hide()；//重新加载initTree()；},错误：函数（数据){ alert('添加分组失败！') } });}) //ztree结构设置定义变量设置={ check : { enable : true，chkStyle : 'radio '，radioType : 'all' }，async : {//异步加载数据操作启用： true，url : path() '/ztree '，autoParam : [ 'id' ]，键入： 'get '，//数据过滤器： AJaxDatafilter，//用于对埃阿斯返回数据进行预处理的函数dataType : 'json' }，edit : { enable : true，showRemoveBtn : false，//设置是否显示删除按钮showRenameBtn : setRenameBtn，//设置是否显示重新命名按钮拖动： { isCopy : false，isMove : true，prev : true，next : true，内部： true } }，数据： {保持： {父项：为真//保持父节点的状态}，SimpleDATa : { enable : true，idKey : 'id '，pIdKey : 'pId' }，回调： { BeforeDraw : BeforeDraw，beforeDrop : zTreeBeforeDrop，onDrop : onDrop，onRename : zTreeOnRename，}；函数setrenametn(treeId，treeNode){ return treeNode。isparent}函数zTreeOnRename(事件、treeId、treeNode、isCancel) { if (treeNode.name==' ')返回；var params={ id : treeNode.id，name : treeNode.name，} $ .Ajax({ URL : path()'/z tree/group '，内容类型： ' application/JSON '，类型： 'post '，数据： JSON.stringify(params)，错误：函数(data) { alert('操作失败！') } });}函数BeforeDraw(TreeID，treeNodes) { for (var i=0，l=treeNodes.lengthI li ) { if (treeNodes[i]).token==' 3 '){ return false；} }返回真}函数ztreeberdrop(treeId，treeNodes，targetNode，moveType) { if (targetNode.token！='3') {返回false}返回真}函数onDrop(事件、树Id、树节点、目标节点、移动类型、isCopy) { if(移动类型==null)返回；var params={ id : treeNodes[0].id，pId : targetNode.id，令牌： moveType，} //设置父节点$.ajax({ url : path() '/ztree '，内容类型： ' application/JSON '，类型： 'put '，数据： JSON.stringify(params)，错误：函数(data) { alert('操作失败！') } });} //获取项目路径函数路径(){ var currentPath=window。文件。位置。hrefvar pathName=window。文件。位置。pathNamevar pos=currentPath.indexOf(路径名);var localhostPath=CurrentPath。子串(0，pos)；var项目名称=路径名。子字符串(0，pathName.substr(1).indexOf('/')1)；返回(localhostPath项目名称)；}})总结

以上所述是小编给大家介绍的框架的实现版仿窗子文件新建和拖拽功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！