NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Basic Drag-and-Drop in Tree, programming examples, download Tree sample сode

Basic Drag-and-Drop in Tree

Get a JavaScript programming sample for dragging and dropping objects in DataTree. With the help of our JavaScript code sample, you'll be able to specify how tree nodes would be dragged between different levels in Tree. Feel free to use our code samples or a snippet tool below to create your own web apps.

JS Code

var grida = {
  view:"treetable",
  id:"grida",
  columns:[
    { id:"value", header:"Title", fillspace:true, template:"{common.treetable()} #value#" },
    { id:"state", header:"State", width:100 },
    { id:"hours", header:"Hours", width:100 }
  ],
  drag:true,
  scroll:false,
  url:"https://docs.webix.com/samples/15_datatable/31_treedrag/data/data.php", datatype:"xml"
};

var tpl = {
  template:"<b>Drag an item</b>",
  height:50
};

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