My favorites | Sign in
Project Home Downloads
READ-ONLY: This project has been archived. For more information see this post.
Search
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