Drag-and-Drop between Tree nodes and Drop as child, programming examples of Drag-and-drop between Tree nodes and Drop as child

Drag-and-Drop between Tree nodes and Drop as child

Get a JavaScript programming sample for dragging and dropping objects between Tree nodes and dropping as child in Tree. With this JavaScript coding sample you can prevent Drag-and-Drop on top level items and in leaf items by blocking it before the dragged element reaches the dropping area. The code sample also allows dropping the nodes into a tree branch as its children. Make use of our free programming examples for web development.

JS Code

var grida = {
  view:"treetable",
  id:"grida",
  columns:[
    { id:"id", header:"", css:{"text-align":"right"}, width:50 },
    { id:"value", header:"Film title", fillspace:true,
     template:"{common.treetable()} #value#" },
    { id:"state", header:"State", width:100 },
    { id:"hours", header:"Hours", width:100 }
  ],
  on:{
    onBeforeDragIn:function(context, ev){
      if (!context.target || context.target.header) return false;	//block dnd on top level and for headers
      //block dnd in leaf items
      if (!this.getItem(context.target).$count) return false;
    },
    onBeforeDrop:function(context){
      context.parent = context.target;	//drop as child
      context.index = -1; 				//as last child
    }
  },
  drag:true,
  scroll:false,
  url:"https://docs.webix.com/samples/15_datatable/31_treedrag/data/data.php",
  datatype:"xml"
};

var tpl = {
  template:"<b>Drag from first to second branch, only folders will accept drag</b>",
  height:50
};

webix.ready(function(){
  webix.ui({
    padding:10, 
    rows:[
      tpl,
      grida
    ]
  });	
});	

How to perform drag-and-drop between tree nodes and drop as child in Tree?