drag_super.html
6.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeDrag / onDrag / beforeDrop / onDrop</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.excheck-3.0.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.exedit-3.0.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var setting = {
edit: {
drag: {
prev: dropPrev,
inner: dropInner,
next: dropNext
},
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeDrop: beforeDrop,
onDrag: onDrag,
onDrop: onDrop
}
};
var zNodes =[
{ id:1, pId:0, name:"闅忔剰鎷栨嫿 鐖?, open:true},
{ id:11, pId:1, name:"闅忔剰鎷栨嫿 瀛?1"},
{ id:12, pId:1, name:"闅忔剰鎷栨嫿 瀛?2", open:true},
{ id:121, pId:12, name:"闅忔剰鎷栨嫿 瀛?1"},
{ id:122, pId:12, name:"闅忔剰鎷栨嫿 瀛?2"},
{ id:123, pId:12, name:"闅忔剰鎷栨嫿 瀛?3"},
{ id:13, pId:1, name:"绂佹鎷栨嫿 瀛?1", open:true, drag:false},
{ id:131, pId:13, name:"绂佹鎷栨嫿 瀛?1", drag:false},
{ id:132, pId:13, name:"绂佹鎷栨嫿 瀛?2", drag:false},
{ id:132, pId:13, name:"绂佹鎷栨嫿 瀛?3", drag:false},
{ id:2, pId:0, name:"绂佹瀛愯妭鐐圭Щ璧帮紝鍙互鎺掑簭", open:true, childOuter:false},
{ id:21, pId:2, name:"鎴戜笉鎯虫垚涓虹埗鑺傜偣", dropInner:false},
{ id:23, pId:2, name:"鎴戜笉瑕佹垚涓烘牴鑺傜偣", dropRoot:false},
{ id:24, pId:2, name:"鎷栨嫿璇曡瘯鐪?},
{ id:3, pId:0, name:"绂佹瀛愯妭鐐规帓搴?澧炲姞锛屽彲浠ョЩ璧?, open:true, childOrder:false, dropInner:false},
{ id:31, pId:3, name:"闅忔剰鎷栨嫿 瀛?5"},
{ id:32, pId:3, name:"闅忔剰鎷栨嫿 瀛?6"},
{ id:33, pId:3, name:"闅忔剰鎷栨嫿 瀛?7"}
];
function dropPrev(treeId, treeNode) {
var pNode =treeNode.getParentNode();
if (pNode && pNode.dropInner === false) {
return false;
} else {
for (var i=0,l=curDragNodes.length; i<l; i++) {
var curPNode = curDragNodes[i].getParentNode();
if (curPNode && curPNode !== treeNode.getParentNode() && curPNode.childOuter === false) {
return false;
}
}
}
return true;
}
function dropInner(treeId, treeNode) {
if (treeNode && treeNode.dropInner === false) {
return false;
} else {
for (var i=0,l=curDragNodes.length; i<l; i++) {
if (!treeNode && curDragNodes[i].dropRoot === false) {
return false;
} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== treeNode && curDragNodes[i].getParentNode().childOuter === false) {
return false;
}
}
}
return true;
}
function dropNext(treeId, treeNode) {
var pNode =treeNode.getParentNode();
if (pNode && pNode.dropInner === false) {
return false;
} else {
for (var i=0,l=curDragNodes.length; i<l; i++) {
var curPNode = curDragNodes[i].getParentNode();
if (curPNode && curPNode !== treeNode.getParentNode() && curPNode.childOuter === false) {
return false;
}
}
}
return true;
}
var log, className = "dark", curDragNodes;
function beforeDrag(treeId, treeNodes) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeDrag ] drag: " + treeNodes.length + " nodes." );
for (var i=0,l=treeNodes.length; i<l; i++) {
if (treeNodes[i].drag === false) {
curDragNodes = null;
return false;
} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
curDragNodes = null;
return false;
}
}
curDragNodes = treeNodes;
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeDrop ] moveType:" + moveType);
showLog("target: " + (targetNode ? targetNode.name : "root"));
return true;
}
function onDrag(event, treeId, treeNodes) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" onDrag ] drag: " + treeNodes.length + " nodes." );
}
function onDrop(event, treeId, treeNodes, targetNode, moveType) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" onDrop ] moveType:" + moveType);
showLog("target: " + (targetNode ? targetNode.name : "root"))
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>鎷栨嫿鑺傜偣楂樼骇鎺у埗</h1>
<h6>[ 鏂囦欢璺緞锛歞emo/exedit/drag_super.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1銆乥eforeDrag / onDrag<br/> beforeDrop / onDrop 浜嬩欢鍥炶皟鍑芥暟鎺у埗</h2>
<ul class="list">
<li>姝?Demo 婕旂ず鍚堢悊鍒╃敤閰嶇疆鍙傛暟瀹炵幇鏇村姞鐏垫椿銆佹洿鍔犲悎鐞嗙殑鎷栨嫿瑙勫垯锛屾搷浣滄椂鍙互瀵规瘮"鍩烘湰鎺у埗"鐨勪緥瀛?/li>
<li>姝?Demo 榛樿 鍏佽澶嶅埗 / 绉诲姩</li>
<li class="highlight_red">姝?Demo 涓嫋鎷界浉瀵逛綅缃缃负 function锛屽彲浠ユ牴鎹妭鐐瑰姩鎬佽瀹氾紝浠庤€屽彲浠ユ斁寮冧娇鐢?beforeDrop 鍥炶皟鍑芥暟锛屾嫋鎷芥椂鐨勬晥鏋滀細鏇村ソ</li>
<li><p><span class="highlight_red">鍦ㄥ杩欎簺鐏垫椿鐨勯厤缃啛鎮変互鍚庯紝鐩镐俊浣犺兘澶熷仛鍑烘洿鍔犲悎鐞嗙殑鎷栨嫿瑙勫垯锛?/span><br/>
drag / drop log:<br/>
<ul id="log" class="log"></ul></p></li>
</ul>
</li>
<li class="title"><h2>2銆乻etting 閰嶇疆淇℃伅璇存槑</h2>
<ul class="list">
<li>鍚?"鎷栨嫿 鑺傜偣 鍩烘湰鎺у埗"</li>
</ul>
</li>
<li class="title"><h2>3銆乼reeNode 鑺傜偣鏁版嵁璇存槑</h2>
<ul class="list">
<li>鍚?"鎷栨嫿 鑺傜偣 鍩烘湰鎺у埗"</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>