My favorites
▼
|
Sign in
dynatree
Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag'n'drop, and lazy loading.
Project Home
Downloads
Export to GitHub
READ-ONLY: This project has been
archived
. For more information see
this post
.
Search
Search within:
All issues
Open issues
New issues
Issues to verify
for
Advanced search
Search tips
Subscriptions
Issue
381
attachment: sample.html
(4.0 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Code - Dropping into tree in droppable container</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel='stylesheet' type='text/css' href='dynatree/skin/ui.dynatree.css'>
<script src='dynatree/jquery.dynatree.js' type="text/javascript"></script>
<style>
.note {
width: 600px;
}
td > p {
margin-bottom: 3px;
}
#tree1 {
width: 175px;
height: 300px;
margin-bottom: 10px;
vertical-align: text-top;
}
#tree2 {
width: 175px;
height: 300px;
vertical-align: text-top;
}
</style>
</head>
<body>
<p class="note">Drag from Tree 1 to build Tree 2. Drop anywhere in Tree 2
container to append to Tree 2.</p>
<p class="note">After you've got a few nodes in Tree 2, try to drop node
within Tree 2. But then tree and container both try to handle event.
Would like to call event.stopPropagation() so event only handled once
(by tree). But how access event object?</p>
<table>
<tr>
<td>
<p>Tree 1:</p>
<div id="tree1"> </div>
</td>
<td>
<p>Tree 2:</p>
<div id="tree2"></div>
</td>
</tr>
</table>
<script id="source">
$(document).ready(function () {
$('#tree1').dynatree({
checkbox: false,
children: [
{ key: 'item-1', title: 'Item 1' },
{ key: 'item-2', title: 'Item 2' },
{ key: 'item-3', title: 'Item 3' },
{ key: 'item-4', title: 'Item 4' },
{ key: 'item-5', title: 'Item 5' },
{ key: 'item-6', title: 'Item 6' },
{ key: 'item-7', title: 'Item 7' },
{ key: 'item-8', title: 'Item 8' },
{ key: 'item-9', title: 'Item 9' },
{ key: 'item-10', title: 'Item 10' }
],
dnd: {
onDragStart: function () { return true; },
onDragEnter: function () { return ['before','after'] },
onDrop: generate_onDrop_handler('tree1'),
},
});
$('#tree2').dynatree({
checkbox: false,
dnd: {
onDragStart: function () { return true; },
onDragEnter: function () { return ['before','after'] },
onDrop: generate_onDrop_handler('tree2')
},
});
$('#tree2').droppable({
hoverClass: "drophover",
addClasses: true,
drop: function(event, ui) {
var source = ui.helper.data("dtSourceNode");
receive_dropped_node(null,source,null,'tree2');
}
});
});
function generate_onDrop_handler(receivingtree) {
return function (node, sourceNode, hitMode, ui, draggable) {
return receive_dropped_node(node,sourceNode,hitMode,receivingtree);
};
}
// consistent handling of dropped nodes whether received by
// either tree or tree's container
function receive_dropped_node(receiver,source,hitMode,receivingtree) {
var copynode;
// source may be null, if it is a non-Dynatree droppable.
if(!source) {
return false;
}
// would like to do an event.stopPropagation() here,
// but how access event object?
// If I passed either 'ui' or 'draggable' to this function
// could I pull event obj from there?
if(receiver && source.parent === receiver.parent) {
source.move(receiver,hitMode);
}
else {
copynode = source.toDict(true);
if(hitMode == "before"){
receiver.parent.addChild(copynode, receiver);
}else if(hitMode == "after"){
receiver.parent.addChild(copynode, receiver.getNextSibling());
}
else {
$('#' + receivingtree).dynatree('getRoot').addChild(copynode);
}
source.remove();
}
return true;
}
</script>
</body>
</html>
Powered by
Google Project Hosting