Please see this codesandbox.
I have a parent div that needs to handle for draggable events (such as when a file is dragged over it). When onDragEnter
is invoked, I want the background color to change. However, I have a child div, which, when hovering over it, invokes the parent div’s onDragLeave
event. I’ve tried using a ref with this child div to determine if the event target is contained in the child div but that doesn’t seem to be working. How can I avoid a child div in React invoking the onDragLeave
event? Thanks!
import React, { useState } from 'react'; const App = () => { const [dragOver, setDragOver] = useState(false); const preventDefaults = (event) => { event.preventDefault(); event.stopPropagation(); }; const onDragEnter = (event) => { preventDefaults(event); console.log('ENTER'); if (!dragOver) { setDragOver(true); } }; const onDragLeave = (event) => { preventDefaults(event); console.log('LEAVE'); setDragOver(false); }; return ( <div data-testid="document-upload" onDragEnter={onDragEnter} onDragLeave={onDragLeave} style={{ background: dragOver ? 'green' : 'red', height: '20rem', width: '20rem', display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <div style={{ border: '2px solid blue', height: '10rem', width: '10rem' }} /> </div> ); }; export default App;
Advertisement
Answer
The simplest way to do this would be to set pointerEvents: "none"
in the style
prop of the child <div>
, so that all pointer-related events on this div are ignored. That would introduce some limitations, though – like you couldn’t bind click events to the child div.
If this doesn’t fit within the constraints of your application, you can modify your onDragLeave
handler to inspect the relatedTarget
of the event (see docs). If the drag is leaving the parent <div>
but entering a child of the parent, then the relatedTarget
(i.e. child div), will be contained (see docs) by the currentTarget
(i.e. the parent <div>
)
Here’s the code that should work:
const onDragLeave = (event) => { preventDefaults(event); // This condition will be true when the drag leaves the parent for a child, // but false when the drag leaves the parent for somewhere else. if (event.currentTarget.contains(event.relatedTarget)) return; console.log("LEAVE"); setDragOver(false); };
See this codesandbox.