Dragging Nodes Between Trees

[mafin1799]

how to implement copying of a node when dragging from one tree to another?

[jameskerr]

I've never tried this, but this would be a good demo to attempt. Thanks for the idea.

[mafin1799]

that is, the existing functionality is enough for this?)

[jameskerr]

This is not possible today. Unfortunately. I few changes will need to be made to the drag and drop functionality.

[theearlofsandwich]

Can I +1 dragging between trees please? I've got everything else working as a full controlled component (so moving, editing, deleting) apart from this - I took a look at the source code but was put off by "the most complex, tricky function in the whole repo." :) At the moment I can see it does do a drop event onto another tree, but the index and parent are not being set correctly.

[atmnksd]

My use case is similar but slightly different. I want to be able to drop nodes of tree into another react component. is there anyway to set type and item properties of useDrag which must be use internally in app. or do i need to use draghandle?

[atmnksd]

I created this PR using which this is now possible #282

[theearlofsandwich]

I created this PR using which this is now possible #282

Hi atmnk, are you able to provide a short example of how to use this, please? I've managed to patch Arborist with your code and build, but not sure how to use what you've done. Does this add the node data into the Tree onMove?

[atmnksd]

you need to use useDrop Hook in the target List as it is being done in this code.
This should have been originally possible as well. I just made it more flexible where accept determined the key 'NODE' read more about react dnd useDrag and useDrop hook

const onDrop = useCallback((props: any, monitor: any) => {
    if (monitor.getItemType() == 'NODE') {
     modify target tree data here
  }, [your dependencies])
const [{ isDropOver, canDrop }, drop] = useDrop({
    accept: ['NODE'],
    drop: onDrop,
    collect: (monitor) => ({
      isDropOver: monitor.isOver(),
      canDrop: monitor.getItemType()==monitor.canDrop(),
    }),
  });
  const isActive = isDropOver && canDrop
  let backgroundColor = 'rounded-xl '
  if (isActive) {
    backgroundColor = 'rounded-xl bg-green-400'
  } else if (canDrop) {
    backgroundColor = 'rounded-xl bg-yellow-400'
  }```
 

[theearlofsandwich]

Hi all, I've created a PR that enables cross tree dragging and dropping of nodes. Works for both controlled and uncontrolled trees and demo included in the showcase.

#306