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

/*
  You can provide custom drop behaviour. In this sample: 

  Drop on folder: item will be set as a first child of this folder 
  Drop on item: moves dragged item next to the target.
*/


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:{
      onBeforeDrop:function(ctx, ev){
        // aceppt only dnd on data area
        if(!ctx.target || !this.getItem(ctx.target)) return false; 

        if (this.getItem(ctx.target).$count && this.getItem(ctx.target).open){
          // drop as first child
          ctx.parent = ctx.target;
          ctx.index = 0;
        } else {
          // drop next
          ctx.index++;
        }
      }
    },
    drag:true,
    url:"https://docs.webix.com/samples/15_datatable/31_treedrag/data/data.php", datatype:"xml"
  });	
});