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.
/* 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" }); });