Enabling Drag-and-Drop in DataTree, JavaScript Programming Example of Enabling Drag-and-Drop in DataTree

Home
Examples
Enabling Drag-and-Drop in DataTree

JavaScript Programming Example of Enabling Drag-and-Drop in DataTree

The coding sample below allows dragging items from one tree to another. Select the item you want to move and drag it pressing Ctrl + Click. Feel free to use our sample codes to accelerate your web development projects.

JS Code

/*
  You can drag-n-drop multiple items at once. 
  Select multiple items in one tree with Ctrl+click and drag them to another one.
*/


webix.ui({
  	rows:[
      {cols:[
      {
        view:"tree",
        select:'multiselect',
		drag:true,
		data: bigtreedata
      },
      {
      	view:"tree",
		select:'multiselect',
		drag:true,
		data: smalltreedata
      }   
    ]},
    {gravity:.3}
  ]
});

HTML Code

<script>
var bigtreedata = [
    {id:"root", value:"Films data", open:true, data:[
		{ id:"1", open:true, value:"The Shawshank Redemption", data:[
			"page1","page2","page3","page4","page5","page6","page7","page8","page9","page10",
			"page11","page12","page13","page14","page15","page16","page17","page18","page19","page20",
			"page21","page22","page23","page24","page25","page26","page27","page28","page29","page30",
			"page31","page32","page33","page34","page35","page36","page37","page38","page39","page40",
			"page41","page42","page43","page44","page45","page46","page47","page48","page49","page50"
		]},
		{ id:"2", open:true, value:"The Godfather", data:[
			{ id:"2.1", value:"Part 1" },
			{ id:"2.2", value:"Part 2" }
		]}
	]}
];

var smalltreedata = [
    {id:"root", value:"Films data", open:true, data:[
		{ id:"1", open:true, value:"The Shawshank Redemption", data:[
			{ id:"1.1", value:"Part 1" },
			{ id:"1.2", value:"Part 2", data:[
				{ id:"1.2.1", value:"Page 1" },
				{ id:"1.2.2", value:"Page 2" },
				{ id:"1.2.3", value:"Page 3" },
				{ id:"1.2.4", value:"Page 4" },
				{ id:"1.2.5", value:"Page 5" }
			]},
			{ id:"1.3", value:"Part 3" }
		]},
		{ id:"2", open:true, value:"The Godfather", data:[
			{ id:"2.1", value:"Part 1" },
			{ id:"2.2", value:"Part 2" }
		]}
	]}
];
</script>

How to enable drag-and-drop in DataTree with Webix?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features