DnD how to differentiate elements when dragging them

[abhishekmg]

I want to change the bg-color of the drop target based on what iam dragging

https://react-spectrum.adobe.com/react-aria/useDraggableCollection.html#droptarget

In the above example when I drag Photoshop and hover it over the drop target , I want the drop targets bg-color to change to blue

but when i drag InDesign and hover over drop target I want bg-color to change to green

Basically I want something to tell me which element is being hovered over drop target

Any help is much appreciated !

[reidbarber]

You can share state of what's being dragged to the drop target.

  let [currentlyDragging, setCurrentlyDragging] = React.useState(null);

  let onDragStart = (e) => {
    setCurrentlyDragging(e.keys);
  };

  let onDragEnd = (e) => {
    setCurrentlyDragging(null);
  };

  <Listbox
    onDragStart={onDragStart}
    onDragEnd={onDragEnd}
  ...

  // Then pass currentlyDragging to your drop target
  <DropTarget currentlyDragging={currentlyDragging} />

Example: https://codesandbox.io/s/dnd-custom-dropzone-cl9s01?file=/src/App.js

[devongovett]

Yeah to add on to this, the native drag and drop API doesn't give us access to the dragged data util you actually drop for privacy/security reasons I believe. But you do have access to the drag types. So an alternative solution could be to use a different drag type for each item returned by the getTypes function in useDrag and then based on the type in onDropEnter in useDrop you could change the color accordingly.

[abhishekmg]

Got it understood , thanks a lot !