preventing a child from inheriting draggable" attribute in html - html

Question

i have some <div></div> elements with draggable="true" attribute but same thing gets applied on child elements,but i dont want to apply it on child elements, So how do i prevent this default behavior?
code :
<div draggable="true" ondragstart="play(event)" ondrop="pause(event)" id="move">
<span id="text">
drag me
</span>
</div>
as i used dragable="true" on <div> so span also gets the same property.

Answer 1

I was having a similar event with a sortable drag-and-drop "list" I created. Each "row" of the list looks like this.
<div class='row' draggable='true'>
<div class='drag-handle' ></div>
<img class='icon-image' draggable='false'>
<input type='text' name='demo' >
<button class='remove-btn' onclick='removeItem(this,event)'>Remove</button>
</div>
When I tried selecting the text inside of the "input" element, somehow I would start dragging the whole "row". As frustrating as this was, the best solution I found was to simply apply the draggable='true' property to the item with the class="drag-handle" which would be my dragging icon that would fire the ondragstart(e) event.
The rest can be handled in JS
In JS, reference the parent element "row" by using the closest(".row") method
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('.drag-handle').forEach(handle => {
handle.addEventListener("dragstart", dragStart)
handle.addEventListener("drag", dragging)
handle.addEventListener("dragend", dragEnd)
})
function dragStart(e) {
document.querySelectorAll(".row").forEach(row=>{
row.addEventListener("dragover", dragOver)
})
var target_row = e.target.closest(".row")
target_row.classList.add("dragging")
}
Note:
I added a class of "dragging" to the one "row" that was going to be dragged so I could do a querySelectorAll('.row:not(.dragging)') for other operations, classes, etc, however, this is NOT required for the intended purpose to work. Just a bit more context that hope helps your problem.