Problems on Drag and drop with treeView

Problems on Drag and drop with treeView

Posted by: javieragr99 on 21 August 2018, 4:09 am EST

• 

  javieragr99

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 August 2018, 4:09 am EST

  Hi team I have two questions.
  
  1.- How can I detect when the drag item is over the node and when is under the node, like the gif. I see the event and both cases the ‘dropTarget’ are the same (level, nodes and parentNode)

  (level:0
  nodes:null
  parentNode:null)
  ```.
  
  2.-The other is , Im using the event drop but drop event, I just have the item on 'dataItem', but the item does not  exist yet on the droptarget until the event ends, so I need to get the tree with the new node updated  before the event ends, or wich event I need to use?
  
  [img]https://gccontent.blob.core.windows.net/forum-uploads/file-5def163a-4bd2-471c-9970-7c43836b9fbf.gif[/img]

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 21 August 2018, 8:27 pm EST

  Hi,

  1). To detect the position relative to the target node, you may use ’ position ’ property of TreeNodeDragDropEventArgs.
  
  Please refer to the following code snippet:-

  treeView.dragOver.addHandler((s, e)=>{
  	let pos;
  	switch(e.position){
  		case 0: post="Before";break;
  		case 1: post="After";break;
  		case 2: post="Into";break;
  	}
  	//do something with the position
  });
  
  

  2). You may update the dataItem from dragSource and then call dropTarget.treeView.loadTree() on setTimeout() to let the drop event finish first before updating the tree. This way tree will be loaded with the modified value.

  Please refer to the following sample which implements the same:-
  
  https://stackblitz.com/edit/js-vgs3dl?file=index.js

  ~Sharad

• 

  javieragr99

  • Post Options:
  • Link
    Copy

  Posted 22 August 2018, 4:39 am EST

  Thank you so much, it has been very helpful.