Drag and Drop Multiple Nodes

19 Apr 20173 minutes to read

TreeView supports to drag and drop multiple nodes by specifying allowMultiSelection as true along with allowDragAndDrop as true. It allows you to drag and drop multiple nodes in TreeView.

HTML

<!--create the TreeView wrapper-->
	<table>
		<tr>
			<td>
				<div id="treeViewDrag"></div>
			</td>
			<td>
				<div id="treeViewDrop"></div>
			</td>
		</tr>
	</table>

JS

var tree1 = [

		{ id: 1, text: "Item 1" },
	
		{ id: 2, text: "Item 2" },
	
		{ id: 3, text: "Item 3" },
	
		{ id: 4, text: "Item 4" },
	
		{ id: 5, parent: 1, text: "Item 1.1" },
	
		{ id: 6, parent: 1, text: "Item 1.2" },
	
		{ id: 7, parent: 1, text: "Item 1.3" },
	
		{ id: 8, parent: 3, text: "Item 3.1" },
	
		{ id: 9, parent: 3, text: "Item 3.2" },
	
		{ id: 10, parent: 5, text: "Item 1.1.1" }
	
	];
	
	var tree2 = [
	
		{ id: 11, text: "Item 5" },
	
		{ id: 12, text: "Item 6" },
	
		{ id: 13, text: "Item 7" },
	
		{ id: 14, text: "Item 4" },
	
		{ id: 15, parent: 11, text: "Item 5.1" },
	
		{ id: 16, parent: 11, text: "Item 5.2" },
	
		{ id: 17, parent: 11, text: "Item 5.3" },
	
		{ id: 18, parent: 13, text: "Item 7.1" },
	
		{ id: 19, parent: 13, text: "Item 7.2" },
	
		{ id: 10, parent: 15, text: "Item 5.1.1" }
	
	];
	
	$(function () {
	
		// initialize and bind the TreeView with local data
	
		$("#treeViewDrag").ejTreeView({
	
			allowMultiSelection: true,
	
			allowDragAndDrop: true,
	
			fields: { dataSource: tree1, id: "id", parentId: "parent", text: "text" },
	
		});
	
		$("#treeViewDrop").ejTreeView({
	
			allowMultiSelection: true,
	
			allowDragAndDrop: true,
	
			fields: { dataSource: tree2, id: "id", parentId: "parent", text: "text" }
	
		});
	
	});

For more details about multiple drag and drop in TreeView, refer the sample here.