Here is the code snippet I am working with: a div container with a header and body covering 100% of its surface:
<div class="ui-layout--col">
<div class="ui-layout--cell-container"> <!-- $0 -->
<div class="ui-layout--panel-header-bar" draggable="true">
<label>New panel</label>
</div>
<div class="ui-layout--panel-body">
body
</div>
</div>
</div>
I am trying to handle the dragenter and dragleave events on the container div, but encountering issues. When applying a style during dragging over, the event triggers on the children (header and body) instead of just the container. This leads to multiple triggering within the same container.
Is there a way to specifically target only the container for these events, ignoring its children even if they cover the entire area?
How would you approach solving this challenge?
Appreciate your insights!