So, in HTML, I can make an element draggable by setting the "draggable" attribute to true:
<div class="my-draggable-element" draggable="true"></div>
This makes the element, and its entire subtree, draggable. That is, clicking and dragging on the element visually drags the element, showing it partially transparent, fixed under the cursor, and the dragging also starts triggering the drag events in JS.
Say I have a sub-element, though, that should not be draggable, but is inside the element:
<div class="my-draggable-element" draggable="true">
<div class="not-draggable"></div>
</div>
How do I prevent clicking and dragging on this sub-element from dragging the parent element? Ultimately, it should prevent the element from visually dragging, and also avoid triggering any JS events.
As this is JS-driven, answers using preventDefault or stopPropagation on any JS events are fine.
TIA!
