[FIXED] How to implement drag and drop so dragging child element will drag whole parent element

Issue

I'm working on a media import plugin for wordpress. I'm trying to implement a drag and drop feature to reorder media elements(audio and/or images) that the user has imported. I have a <div> tag(we'll call these media divs) that holds up to three other <span>, <img>, or <audio> tags. So I have all the media assets that have been imported displayed in a line and would like to be able to drag and drop to reorder the media divs. I have no problem implementing the basic drag and drop using html5. My problem is that right now when I click on the media child elements(<audio> or <img>) inside the media divs, the child element is the target of the drag event. Is there any way I can reset the target of the drag event to be the parent element so I drag the whole media div and not just the media element? I've looked into e.stopPropogation() and read up on bubbling, and capturing but every way I've tried to utilize those, it doesn't solve my problem. Is there something I'm missing? I would prefer to avoid jQuery if possible and definitely can't use any libraries or frameworks.
TL;DR: How can I make the parent element the target of a drag event when a child element is clicked?

<div class="npr-import-media npr-import-audio npr-import-images" id="media-container">

    <div class="npr-import-media-container" draggable="true">
        <audio src="<?php echo $audio->format->mp4->{'$text'}; ?>" controls></audio>
        <span class="npr-media-delete">X</span>
    </div>

    <div class="npr-import-image-container npr-import-media-container" draggable="true">
        <img class="npr-import-image" src="<?php echo $image->src; ?>" >
        <span class="npr-import-image-caption"><?php echo $image->caption->{'$text'} ?></span>
        <span class="npr-media-delete">X</span>
    </div>

    <div class="npr-import-add-media npr-import-media-container">
        Add Media+
    </div>

</div>

This is the HTML portion of my code. There is originally some more php functionality to loop through the original source material to display all of the media elements being imported in from the original article, but I don't think it's necessary to include that.

Solution

You can set the handler for ondragstart event to return false, like below:

<div class="npr-import-media npr-import-audio npr-import-images" id="media-container">
    <div class="npr-import-image-container npr-import-media-container" draggable="true" ondragstart="drag(event)" style="border:1px solid blue;padding:10px;">
        <img class="npr-import-image" src="img.jpg" >
        <span class="npr-import-image-caption">Caption</span>
        <span class="npr-media-delete">X</span>
    </div>

    <div class="npr-import-add-media npr-import-media-container">
        Add Media+
    </div>
</div>
<script>
function drag(e) {
    console.log(e);
}
var images = document.getElementsByTagName('img');
for(i = 0 ; i < images.length; i++) 
    images[i].ondragstart = function() { return false; }
</script>

On console output you can see:

>> DragEvent {isTrusted: true, dataTransfer: DataTransfer, screenX: 66, screenY: 161, clientX: 66…}

UPDATE By setting drag event handlers on the parent elements either by html attributes as above or attaching event listeners by code as below:

document.getElementById('draggable').addEventListener('dragstart', function(e) {
   console.log(e);
});

Answered By - jacksparrow92

Answer Checked By - David Goodson (PHPFixing Volunteer)