Subject

When using Gridstack v10.1.1 with React, implementing the drag and drop feature using the .grid-stack-item class seems to override and break the dragstart and dragend events on div elements from being dragged and dropped into the grid.

Drag and drop works fine, but I need to listen to the drag state from the elements being dragged from the sidebar.

Environment

• version of gridstack.js - v10.1.1
• browser/OS - Chrome / Win 10

Steps to reproduce

1. Initialize Gridstack with basic configuration.
2. Add grid-stack-item class to a div inside a sidebar.
3. Implement dragstart and dragend event listeners on the same div.
4. Attempt to drag the div to trigger the events.

For reference : https://jsfiddle.net/axwh8odu/14/

Expected behavior

The dragstart and dragend events should fire when starting and ending the drag, allowing for custom behavior during these events.

Actual behavior

The dragstart and dragend events do not fire when dragging elements with the grid-stack-item class from the sidebar, preventing any custom drag behavior from being implemented.

I am looking for any workarounds or fixes that might allow the dragstart and dragend events to work as expected with Gridstack items. Additionally, insights into why these events are being overridden or suggestions on how to prevent this issue would be greatly appreciated.

Thank you for your assistance and the work you put into maintaining Gridstack. It's an invaluable tool for our project, and I look forward to any guidance you can provide on this issue.