drag.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> ZTREE DEMO - drag & drop</TITLE>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  7. <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  8. <script type="text/javascript" src="../../../js/jquery.min.js"></script>
  9. <!-- <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>-->
  10. <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
  11. <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
  12. <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
  13. <SCRIPT type="text/javascript">
  14. <!--
  15. var setting = {
  16. edit: {
  17. enable: true,
  18. showRemoveBtn: false,
  19. showRenameBtn: false
  20. },
  21. data: {
  22. simpleData: {
  23. enable: true
  24. }
  25. },
  26. callback: {
  27. beforeDrag: beforeDrag,
  28. beforeDrop: beforeDrop
  29. }
  30. };
  31. var zNodes =[
  32. { id:1, pId:0, name:"随意拖拽 1", open:true},
  33. { id:11, pId:1, name:"随意拖拽 1-1"},
  34. { id:12, pId:1, name:"随意拖拽 1-2", open:true},
  35. { id:121, pId:12, name:"随意拖拽 1-2-1"},
  36. { id:122, pId:12, name:"随意拖拽 1-2-2"},
  37. { id:123, pId:12, name:"随意拖拽 1-2-3"},
  38. { id:13, pId:1, name:"禁止拖拽 1-3", open:true, drag:false},
  39. { id:131, pId:13, name:"禁止拖拽 1-3-1", drag:false},
  40. { id:132, pId:13, name:"禁止拖拽 1-3-2", drag:false},
  41. { id:133, pId:13, name:"随意拖拽 1-3-3"},
  42. { id:2, pId:0, name:"随意拖拽 2", open:true},
  43. { id:21, pId:2, name:"随意拖拽 2-1"},
  44. { id:22, pId:2, name:"禁止拖拽到我身上 2-2", open:true, drop:false},
  45. { id:221, pId:22, name:"随意拖拽 2-2-1"},
  46. { id:222, pId:22, name:"随意拖拽 2-2-2"},
  47. { id:223, pId:22, name:"随意拖拽 2-2-3"},
  48. { id:23, pId:2, name:"随意拖拽 2-3"}
  49. ];
  50. function beforeDrag(treeId, treeNodes) {
  51. for (var i=0,l=treeNodes.length; i<l; i++) {
  52. if (treeNodes[i].drag === false) {
  53. return false;
  54. }
  55. }
  56. return true;
  57. }
  58. function beforeDrop(treeId, treeNodes, targetNode, moveType) {
  59. return targetNode ? targetNode.drop !== false : true;
  60. }
  61. function setCheck() {
  62. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  63. isCopy = $("#copy").attr("checked"),
  64. isMove = $("#move").attr("checked"),
  65. prev = $("#prev").attr("checked"),
  66. inner = $("#inner").attr("checked"),
  67. next = $("#next").attr("checked");
  68. zTree.setting.edit.drag.isCopy = isCopy;
  69. zTree.setting.edit.drag.isMove = isMove;
  70. showCode(1, ['setting.edit.drag.isCopy = ' + isCopy, 'setting.edit.drag.isMove = ' + isMove]);
  71. zTree.setting.edit.drag.prev = prev;
  72. zTree.setting.edit.drag.inner = inner;
  73. zTree.setting.edit.drag.next = next;
  74. showCode(2, ['setting.edit.drag.prev = ' + prev, 'setting.edit.drag.inner = ' + inner, 'setting.edit.drag.next = ' + next]);
  75. }
  76. function showCode(id, str) {
  77. var code = $("#code" + id);
  78. code.empty();
  79. for (var i=0, l=str.length; i<l; i++) {
  80. code.append("<li>"+str[i]+"</li>");
  81. }
  82. }
  83. $(document).ready(function(){
  84. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  85. setCheck();
  86. $("#copy").bind("change", setCheck);
  87. $("#move").bind("change", setCheck);
  88. $("#prev").bind("change", setCheck);
  89. $("#inner").bind("change", setCheck);
  90. $("#next").bind("change", setCheck);
  91. });
  92. //-->
  93. </SCRIPT>
  94. </HEAD>
  95. <BODY>
  96. <h1>拖拽节点基本控制</h1>
  97. <h6>[ 文件路径: exedit/drag.html ]</h6>
  98. <div class="content_wrap">
  99. <div class="zTreeDemoBackground left">
  100. <ul id="treeDemo" class="ztree"></ul>
  101. </div>
  102. <div class="right">
  103. <ul class="info">
  104. <li class="title"><h2>1、setting 配置信息说明</h2>
  105. <ul class="list">
  106. <li>此 Demo 仅从功能上演示实现拖拽的基本方法和配置参数</li>
  107. <li class="highlight_red">1)、使用 拖拽功能,必须设置 setting.edit 中的各个属性,详细请参见 API 文档中的相关内容</li>
  108. <li class="highlight_red">2)、使用 拖拽功能的事件回调函数,必须设置 setting.callback.beforeDrag / onDrag / beforeDrop / onDrop 等属性,详细请参见 API 文档中的相关内容</li>
  109. <li><p>基本拖拽设置:<br/>
  110. <input type="checkbox" id="copy" class="checkbox first" checked /><span>允许复制</span>
  111. <input type="checkbox" id="move" class="checkbox " checked /><span>允许移动</span><br/>
  112. <ul id="code1" class="log" style="height:42px;"></ul></p>
  113. </li>
  114. <li><p>拖拽相对位置设置:<br/>
  115. <input type="checkbox" id="prev" class="checkbox first" checked /><span>prev</span>
  116. <input type="checkbox" id="inner" class="checkbox " checked /><span>inner</span>
  117. <input type="checkbox" id="next" class="checkbox " checked /><span>next</span><br/>
  118. <ul id="code2" class="log" style="height:65px;"></ul></p>
  119. </li>
  120. </ul>
  121. </li>
  122. <li class="title"><h2>2、treeNode 节点数据说明</h2>
  123. <ul class="list">
  124. <li>对 节点数据 没有特殊要求,用户可以根据自己的需求添加自定义属性</li>
  125. </ul>
  126. </li>
  127. </ul>
  128. </div>
  129. </div>
  130. </BODY>
  131. </HTML>