Dragstart container propagation suppression

Question

I have a Blazor webassembly project in which I implement drag and drop which works fine in a simple implementation. My unsolved problem occurs when I place a draggable div within another draggable div. If I drag start on the inner draggable div, the container div also triggers a dragstart event. I only wish the inner div to sense the drag start. The inner (contained) div is below. How do I prevent propagation to this div's parent, since I do not want the parent div to fire the event? I have tried many different ways to supply this div with the event.cancleBubble() event or stopPropagation event but have been unsuccessful preventing the parent from firing.

Thanks

                    <div draggable="true" 
                         id=@($"Next{currentcircleNumString}") 
                         class="nextcircle"
                         style="position:absolute;top:30%;left:30%; margin:0px;text-align:center;font-size:1.2vh;width:40%;z-index:100;"
                         @ondrop="@(e=> HandleDrop(e,state?.subState?.UiName,UiSubName, "next",divId))"
                         @ondragstart="@(e=> HandleDragStart(e,state?.subState?.UiName,UiSubName, "next", divId))"
                         @ondragenter="@(e=> HandleDragEnter(e,state?.subState?.UiName,UiSubName, "next", divId))"
                         @ondragleave="@(e=> HandleDragLeave(e,state?.subState?.UiName,UiSubName, "next",divId))"
                         ondragover="event.preventDefault();"
                        >