Jquery 可拖拽的Ztree

比较懒,就只贴关键代码吧,自己把有用的属性全部打印出来了,也加了不少注释。

保存后涉及到的排序问题,刷新问题还未涉及到,后面有的话再加。

  1         $.fn.zTree.init($("#ztree"), {
  2             data: {
  3                 simpleData: {
  4                     enable: true
  5                 }
  6             },
  7             view:{
  8                 selectedMulti :false
  9             },
 10             edit: { //此属性添加后,树才可以被拖拽
 11                 enable: true,
 12                 showRemoveBtn: false,
 13                 showRenameBtn: false,
 14                 drag: {
 15                     isCopy: true,
 16                     isMove: true,
 17                     prev: true,
 18                     next: true,
 19                     inner: true
 20                 }
 21             },
 22             callback: {
 23                 onClick: function(event, treeId, treeNode, clickFlag) {
 24                     switch (treeNode.gradeType) {
 25                         case "db":
 26                             clickCatgryNode(treeNode.id);
 27                             break;
 28                         case "c":
 29                             clickCatgryNode(treeNode.id);
 30                             break;
 31                         case "t":
 32                             clickTabNode(treeNode.id,false);
 33                             break;
 34
 35                         default:
 36                             break;
 37                     }
 38                 },
 39                 beforeDrag: function(treeId, treeNodes){
 40                     console.log("开启拖拽");
 41                     return true;
 42                 },
 43                 beforeDrop: function(treeId, treeNodes, targetNode, moveType, isCopy){
 44                     console.log("可以拖拽");
 45                     //console.log(treeId);
 46                     //console.log(treeNodes);
 47                     console.log(treeNodes);
 48                     //console.log(targetNode);
 49                     console.log("【源节点】节点id:"+treeNodes[0].id+"  父节点id:"+treeNodes[0].pId+"  级层:"+treeNodes[0].level+"  名称:"+treeNodes[0].name);
 50                     //如果拖拽的是目录
 51                     if(treeNodes[0].isParent){
 52                         $.each(treeNodes[0].children,function(i,treeNode){
 53                             console.log("【源节点】子节点"+i+":"+treeNode.id+"  父节点id:"+treeNode.pId+"  级层:"+treeNode.level+"  名称:"+treeNode.name);
 54                         });
 55                     }
 56                     console.log("【目标节点】 节点id:"+targetNode.id+"  父节点id:"+targetNode.pId+"  级层:"+targetNode.level+"  名称:"+targetNode.name);
 57                     //console.log("treeId:"+treeId+"--treeNodes:"+treeNodes+"--targetNode:"+targetNode+"--moveType:"+moveType+"--isCopy:"+isCopy);
 58                     //库名不允许拖拽
 59                     if(treeNodes[0].level==0){
 60                         alert("不允许拖拽库节点");
 61                         return false;
 62                     }
 63                     //不允许拖拽到表节点下(如果树状图中有空目录,那还是需要在后台进行校验该节点是否是表节点)
 64                     if(!targetNode.isParent){
 65                         alert("不允许拖拽任何节点到表节点下");
 66                         return false;
 67                     }
 68
 69                     return true;
 70                 },
 71                 beforeDragOpen: function(){
 72                     console.log("自动展开目录");
 73                     return true;
 74                 },
 75                 onDrag: function(){
 76                     console.log("拖拽中");
 77                     return true;
 78                 },
 79                 onDrop: function(event, treeId, treeNodes, targetNode, moveType, isCopy){
 80                     console.log("拖拽完毕");
 81                     //console.log(treeId);
 82                     //console.log(treeNodes);
 83                     //console.log(targetNode);
 84                     console.log("【源节点】节点id:"+treeNodes[0].id+"  父节点id:"+treeNodes[0].pId+"  级层:"+treeNodes[0].level+"  名称:"+treeNodes[0].name);
 85                     //如果拖拽的是目录
 86                     if(treeNodes[0].isParent){
 87                         $.each(treeNodes[0].children,function(i,treeNode){
 88                             console.log("【源节点】子节点"+i+":"+treeNode.id+"  父节点id:"+treeNode.pId+"  级层:"+treeNode.level+"  名称:"+treeNode.name);
 89                         });
 90                     }
 91                     console.log("【目标节点】 节点id:"+targetNode.id+"  父节点id:"+targetNode.pId+"  级层:"+targetNode.level+"  名称:"+targetNode.name);
 92                     //console.log("event:"+event+"--treeId:"+treeId+"--treeNodes:"+treeNodes+"--targetNode:"+targetNode+"--moveType:"+moveType+"--isCopy:"+isCopy);
 93                     return true;
 94                 },
 95                 onExpand: function(){
 96                     console.log("获得被展开的节点信息");
 97                     return true;
 98                 }
 99             }
100         }, zNodes);
时间: 2024-11-05 15:55:22

Jquery 可拖拽的Ztree的相关文章

jQuery可拖拽3D万花筒旋转特效

jQuery可拖拽3D万花筒旋转特效 这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovertree.com/texiao/jquery/92/ 进去后可以上下左右的拖动图片. 本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素. 默认值: flat继承性: no版本: CSS3JavaScript

jquery实现拖拽的效果

上篇讲的是原生js实现拖拽的效果,本篇是jquery实现拖拽的效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"/> <title> New Documen

SpringMvc+jQuery 文件拖拽上传、选择上传

最近做了个简易的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: fileupload.css: .fileupload_box { position:relative; width: 100%; height: 100%; border: 3px dashed #E5E5E5; text-align: center; z-index: 2000; cursor: pointer; margi

jquery自定义控件拖拽框dragbox

概述: 在做项目的过程中遇到了拖拽框的使用,虽然网上有很多类似的插件,但总归不如自己的好使,于是就自己写了一个,在此总结下来,以便后用. 效果: 提供方法: setTitle(title):设置标题: setContent(content):设置内容: setsize(width, height):设置大小: hide():隐藏: show():显示: 使用方法: 创建对象 var dragbox = $("#dragbox").DragBox({ title:"拖拽的框子&

JQuery之拖拽插件

一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的. 放到我们的DOM上,就是改变它的位置. 它只有两个难点:1.如何知道是在拖? 2.如何知道从哪拖,拖到哪? 其实,

jQuery 鼠标拖拽排序

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title> <style type="text/css"> body, div { margin: 0; paading: 0; f

jquery鼠标拖拽效果分享

//html代码部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/jquery-1.11.1.js"></script> </head> <style> body

jquery gridster 拖拽功能 中文文档

先上git连接 http://git.oschina.net/alexgaoyh/Draging/blob/master/src/main/webapp/gridster/adding-widgets-dynamically.html 效果截图: 1)动态添加模块(http://gridster.net/demos/adding-widgets-dynamically.html):使用add_widget方法,通过数组创建一个gridster实例,产生的模块自动排列,无需指定相对位置. (2)自

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" /&g