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

Drag-and-Drop between Tree nodes - Drop next

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

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

var tpl = {
  template:"<b>Custom drop behaviour in tree</b><br>"+
  "<li>drop on folder: item will be set as a first child of this folder <br></li>"+
  "<li>drop on item: moves dragged item next to the target</li>",
  autoheight:true
};

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

HTML Code

  <style>
   li {
    padding: 0;
    margin-left: 20px;
   }
  </style>

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