HTML5 Drag and Drop optimization guide Correctly in Edge with Nested Elements
I need help solving I'm prototyping a solution and I'm migrating some code and I'm working on a personal project and This might be a silly question, but I'm working with an scenario with the HTML5 drag and drop API when trying to implement it for nested elements within a container. The functionality works perfectly in Chrome and Firefox, but in Microsoft Edge, the drag event doesn't trigger as expected when I drag elements that are nested inside another draggable container. I have set up the drag event listeners as follows: ```javascript const draggableItems = document.querySelectorAll('.draggable'); const dropZone = document.querySelector('.drop-zone'); draggableItems.forEach(item => { item.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', item.id); }); }); dropZone.addEventListener('dragover', (e) => { e.preventDefault(); }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); const id = e.dataTransfer.getData('text/plain'); const draggedElement = document.getElementById(id); dropZone.appendChild(draggedElement); }); ``` I have verified that the IDs for the draggable items are unique, and the drop zone is set up correctly. However, when I attempt to drag an item within Edge, the `dragstart` event seems to be firing, but the `drop` event is not being registered. After some debugging, I noticed that when dragging, Edge shows the message 'want to drop here' when I hover over the drop zone, even though the `dragover` event is preventing the default behavior. I’ve tried: - Adding `e.stopPropagation()` in both the `dragstart` and `drop` events. - Ensuring all elements involved have the correct CSS properties (like `display: block` and `position: relative`). - Testing with simpler structures to isolate the scenario. Is there something specific to Edge that I might be missing, or any known workarounds for this scenario? Any guidance would be appreciated! My development environment is Windows. How would you solve this? What's the correct way to implement this? I'm coming from a different tech stack and learning Javascript. What are your experiences with this? Am I approaching this the right way?