HTML5 Drag and Drop: How to Handle Multiple Drop Zones with React?
I'm having trouble with Hey everyone, I'm running into an issue that's driving me crazy... I'm implementing a drag-and-drop feature using HTML5's Drag and Drop API in a React application. The requirement is to have multiple drop zones where users can drop files, but I'm running into issues where dropped files are not being recognized in all zones. I've set up three drop zones, and when I drag a file over one of them, it changes color to indicate it's active. However, upon dropping, the onDrop event seems to only fire for one of the zones, regardless of where I release the mouse. Here's a simplified version of my component: ```javascript import React, { useState } from 'react'; const DropZone = ({ onDrop, zoneId }) => { const handleDragOver = (e) => { e.preventDefault(); e.stopPropagation(); }; const handleDrop = (e) => { e.preventDefault(); e.stopPropagation(); const files = e.dataTransfer.files; onDrop(files, zoneId); }; return ( <div onDragOver={handleDragOver} onDrop={handleDrop} style={{ width: '200px', height: '200px', border: '1px solid black', margin: '10px' }}> Drop Zone {zoneId} </div> ); }; const App = () => { const handleDrop = (files, zoneId) => { console.log(`Files dropped in Zone ${zoneId}:`, files); }; return ( <div> <DropZone onDrop={handleDrop} zoneId={1} /> <DropZone onDrop={handleDrop} zoneId={2} /> <DropZone onDrop={handleDrop} zoneId={3} /> </div> ); }; export default App; ``` I've confirmed that the drag events are set up correctly, and I'm using Chrome version 92.0.4515.107, but when I drop the files, the console only logs for the last drop zone, regardless of where I dropped. I also tried using the `e.dataTransfer.items` to check the dropped files, but the behavior remains the same. Is there something I'm missing in how the event propagation is handled or do I need to implement a different approach for recognizing multiple drop zones? This is part of a larger API I'm building. Any ideas what could be causing this?