The coding sample below allows dragging items from one tree to another. Select the item you want to move and drag it pressing Ctrl + Click. Feel free to use our sample codes to accelerate your web development projects.
webix.ui({
view:"tree",
container:"testA",
select:"multiselect",
drag:true,
data: webix.copy(smalltreedata)
});
webix.DragControl.addDrag("myDrag",{
move:function(source, target, obj, details){
obj.add({
value:"new item"
}, target, details.parent);
obj.open(target);
}
});
webix.DragControl.addDrop("myDrop",{
$drop:function(source, target){
var dnd = webix.DragControl.getContext();
if (dnd.from.name){ //ignoring non-ui dnd
var value = dnd.from.getItem(dnd.source[0]).value;
target.innerHTML=value;
}
}
});
<script> var smalltreedata = [ {id:"root", value:"Films data", open:true, data:[ { id:"1", open:true, value:"The Shawshank Redemption", data:[ { id:"1.1", value:"Part 1" }, { id:"1.2", value:"Part 2", data:[ { id:"1.2.1", value:"Page 1" }, { id:"1.2.2", value:"Page 2" }, { id:"1.2.3", value:"Page 3" }, { id:"1.2.4", value:"Page 4" }, { id:"1.2.5", value:"Page 5" } ]}, { id:"1.3", value:"Part 3" } ]}, { id:"2", open:true, value:"The Godfather", data:[ { id:"2.1", value:"Part 1" }, { id:"2.2", value:"Part 2" } ]} ]} ]; </script> <div class='header_comment'>Custom drag-and-drop behaviour</div><br> <div id="testA" style='width:300px; height:300px'></div> <hr> <div id="myDrag" style='width:200px; height:100px; border:2px outset silver;'>Drag me to the component</div><br> <div id="myDrop" style='width:200px; height:100px; border:2px outset silver;'>Drag something from the component here</div>