Custom Behavior for Drag-and-Drop in DataTree, JavaScript Programming Example of Custom Behavior for Drag-and-Drop in DataTree

Home
Examples
Custom Behavior for Drag-and-Drop in DataTree

JavaScript Programming Example of Custom Behavior for 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

webix.ui({
  view:"tree",                        
  container:"testA",
  select:"multiselect",
  drag:true,
  data: webix.copy(smalltreedata)
});

webix.DragControl.addDrag("myDrag",{
  move:function(source, target, obj, details){
    obj.add({
      value:"new item"
    }, target, details.parent);
    obj.open(target);
  }
});

webix.DragControl.addDrop("myDrop",{
  $drop:function(source, target){
    var dnd = webix.DragControl.getContext();
    if (dnd.from.name){ //ignoring non-ui dnd
      var value = dnd.from.getItem(dnd.source[0]).value;
      target.innerHTML=value;
    }
  }
});

HTML Code

<script>
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>

<div class='header_comment'>Custom drag-and-drop behaviour</div><br>		
<div id="testA" style='width:300px; height:300px'></div>
<hr>
<div id="myDrag" style='width:200px; height:100px; border:2px outset silver;'>Drag me to the component</div><br>
<div id="myDrop" style='width:200px; height:100px; border:2px outset silver;'>Drag something from the component here</div>

Custom drag-and-drop behaviour

Drag me to the component

Drag something from the component here

How to set up custom behavior for drag-and-drop in DataTree with Webix?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features