Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No drop events when drop target is on completely different DOM tree #117

Open
joeyJsonar opened this issue Sep 14, 2024 · 3 comments
Open

Comments

@joeyJsonar
Copy link

Hello, I have a case below where the draggable (field list on the right most) and target (aggregation builder for visualization on the left of the field list). The left and right are completely different components.

The code for the field list is:

  useEffect(() => {
    if (isDraggable) {
      const el = fieldRef.current;

      return combine(
        draggable({
          element: el!,
          getInitialData: () => ({ field }),
        })
        // dropTargetForElements({
        //   element: el!,
        //   onDragEnter: ({ source }) => {
        //     console.log('XXX:enter:XXX');
        //     console.log(source);
        //   },
        //   onDragLeave: () => console.log('leave'),
        //   onDrop: () => console.log('XXX:drop:XXX'),
        //   // canDrop: () => true,
        // })
      );
    }
  }, []);

If I uncomment the dropTargetForElements, I do get the log for the drop events.

The code for the drop target, at aggregation builder is:

  useEffect(() => {
    const el = fieldSelectRef.current;

    return dropTargetForElements({
      element: el!,
      onDragEnter: ({ source }) => {
        console.log('XXX:enter:XXX');
        console.log(source);
      },
      onDragLeave: () => console.log('leave'),
      onDrop: () => console.log('XXX:drop:XXX'),
      // canDrop: () => true,
    });
  }, []);

Here, no logs are ever logged.

Don't know what I am doing wrong.

One caveat: We still have react-beautiful-dnd on some part of the system.

Screenshot 2024-09-13 at 7 13 52 PM
@joeyJsonar
Copy link
Author

Just update, I tried removing react-beautiful-dnd and still not working.

@joeyJsonar
Copy link
Author

After further debugging. I noticed that if I am far away from the nest of react components the registry inside the pragmatic library is different and is empty, causing no drag drop event to be emitted.

Will investigate further and report back.

@alexreardon
Copy link
Collaborator

Could I please grab a stand alone example (eg on codesandbox) which reproduces the issue? I suspect there is a setup issue going on

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants