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

/*
  You can provide custom drop logic. Drag from first to second branch, only folders will accept drag.
*/

webix.ready(function(){
  webix.ui({
    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(ctx, ev){
        if (!ctx.target || ctx.target.header) return false;	// block dnd on top level and for headers
        // block dnd in leaf items
        if (!this.getItem(ctx.target).$count) return false;
      },
      onBeforeDrop:function(ctx, ev){
        ctx.parent = ctx.target; //drop as child
        ctx.index = -1; //as last child
      }
    },
    drag:true,
    scroll:false,
    url:"https://docs.webix.com/samples/15_datatable/31_treedrag/data/data.php",
    datatype:"xml"
  });	
});	

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