Context Navigation

source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/tree/customdragdrop.html @ 604

Last change on this file since 604 was 604, checked in by vmipsl, 12 years ago
images
File size: 7.6 KB

Line
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<title>Tree - Drag & Drop</title>
5	<meta charset="utf-8" />
6	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7	<meta name="description" content="Drag&Drop" />
8	<meta name="keywords" content="" />
9	<meta name="author" content="ComponentOne" />
10	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
11	<link href="../../themes/wijmo/jquery.wijmo-open.2.1.0.min.css" rel="stylesheet" type="text/css" />
12	<link href="../../themes/wijmo/jquery.wijmo.wijtree.css" rel="stylesheet" type="text/css" />
13	<script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
14	<script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
15	<script src="../../external/jquery.wijmo-open.all.2.2.2.min.js" type="text/javascript"></script>
16	<script src="../../Wijmo/jquery.wijmo.wijtree.js" type="text/javascript"></script>
17	<script id="scriptInit" type="text/javascript">
18	$(document).ready(function () {
19	var span = "<span class=\"ui-widget-content helperInner\">";
20	$("#tree1").wijtree({
21	allowDrop: false,
22	allowDrag: true,
23	dropVisual: function () {
24	return $("<div>").addClass("dropVisual");
25	},
26	appendTo: 'body',
27	draggable: {
28	revert: "invalid",
29	start: function (event, ui) {
30	ui.helper.html(ui.helper.html() + span);
31	},
32	drag: function (event, ui) {
33	var inner = ui.helper.children(".helperInner");
34	if (inner.length) {
35	inner.html("x:" + event.pageX + " y:" + event.pageX);
36	}
37	},
38	stop: function (event, ui) {
39	$(this).hide()
40	$(this).show("highlight", 500);
41	}
42	}
43	});
44
45	var getInitMarkup = function (dragNode) {
46	var node = dragNode.clone();
47	node.find("a").unwrap().unwrap();
48	node.find("li>span,>span").remove();
49	return node;
50	};
51
52	$("#tree2").wijtree({
53	allowDrop: true,
54	allowDrag: false,
55	droppable: {
56	drop: function (event, ui) {
57	var dragNode = ui.draggable,
58	p = ui.newParent,
59	po = ui.newIndex, node;
60
61	node = getInitMarkup(dragNode);
62
63	if (p.is(":wijmo-wijtree")) {
64	p.wijtree("add", node, po);
65	}
66	else {
67	p.wijtreenode("add", node, po);
68	}
69	}
70	}
71	});
72
73	$("#trash").droppable({
74	activeClass: "ui-state-hover",
75	hoverClass: "ui-state-active",
76	scope: "tree",
77	drop: function (event, ui) {
78	var node = ui.draggable;
79	delTreeNode(node, this);
80	}
81	});
82
83	var delTreeNode = function (node, trash) {
84	var parent = node.parent()
85	.closest(":wijmo-wijtreenode,:wijmo-wijtree");
86	if (parent.is(":wijmo-wijtreenode")) {
87	parent.wijtreenode("remove", node);
88	}
89	else {
90	parent.wijtree("remove", node);
91	}
92	node.appendTo($(trash).children("ul:eq(0)"));
93	}
94	});
95	</script>
96	<style>
97	#trash
98	{
99	float: right;
100	min-height: 12em;
101	padding: 1%;
102	width: 32%;
103	}
104	#trash ul
105	{
106	list-style: none;
107	}
108
109	#trash ul li
110	{
111	margin-bottom: 10px;
112	}
113
114	div.wijmo-wijtree
115	{
116	float: left;
117	}
118
119
120	.dropVisual
121	{
122	height:1px;
123	font-size:0px;/fix ie 6 issue/
124	background-color:Red;
125	}
126	</style>
127	</head>
128	<body class="demo-single">
129	<div class="container">
130	<div class="header">
131	<h2>
132	Drag & Drop</h2>
133	</div>
134	<div class="main demo">
135	<!-- Begin demo markup -->
136
137	<div>
138	<ul id="tree1">
139	<li><a><span>Folder 1</span></a>
140	<ul>
141	<li><a><span>Folder 1.1</span></a></li>
142	<li><a><span>Folder 1.2</span></a></li>
143	<li><a><span>Folder 1.3</span></a></li>
144	<li><a><span>Folder 1.4</span></a></li>
145	<li><a><span>Folder 1.5</span></a></li>
146	</ul>
147	</li>
148	<li><a href="#"><span>Folder 2</span></a>
149	<ul>
150	<li><a><span>Folder 2.1</span></a></li>
151	<li><a><span>Folder 2.2</span></a></li>
152	<li><a><span>Folder 2.3</span></a></li>
153	<li><a><span>Folder 2.4</span></a></li>
154	<li><a><span>Folder 2.5</span></a></li>
155	</ul>
156	</li>
157	<li><a href="#"><span>Folder 3</span></a>
158	<ul>
159	<li><a><span>Folder 3.1</span></a></li>
160	<li><a><span>Folder 3.2</span></a></li>
161	<li><a><span>Folder 3.3</span></a></li>
162	</ul>
163	</li>
164	</ul>
165	</div>
166
167
168	<div id="trash" class="ui-widget-content">
169	<h4 class="ui-widget-header">
170	<span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
171	<ul>
172	</ul>
173	</div>
174	<div style="clear:both"></div>
175	<p>
176	Clone node to this tree:</p>
177	<div>
178	<ul id="tree2">
179	<li><a><span>Folder 4</span></a>
180	<ul>
181	<li><a><span>Folder 4.1</span></a></li>
182	<li><a><span>Folder 4.2</span></a></li>
183	<li><a><span>Folder 4.3</span></a></li>
184	<li><a><span>Folder 4.4</span></a></li>
185	<li><a><span>Folder 4.5</span></a></li>
186	</ul>
187	</li>
188	<li><a href="#"><span>Folder 5</span></a>
189	<ul>
190	<li><a><span>Folder 5.1</span></a></li>
191	<li><a><span>Folder 5.2</span></a></li>
192	<li><a><span>Folder 5.3</span></a></li>
193	<li><a><span>Folder 5.4</span></a></li>
194	<li><a><span>Folder 5.5</span></a></li>
195	</ul>
196	</li>
197	</ul>
198	</div>
199	<!-- End demo markup -->
200	</div>
201	</div>
202	</body>
203	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: