javascript - 如何实现拖放以便拖动子元素将拖动整个父元素

Question

我正在为 wordpress 开发一个媒体导入插件。我正在尝试实现拖放功能以重新排序用户导入的媒体元素(音频和/或图像)。我有一个 <div>标签(我们称这些 media div)最多可容纳三个其他 <span> , <img> , 或 <audio>标签。所以我将所有已导入的媒体 Assets 显示在一行中，并希望能够拖放以重新排序 media div。我使用 html5 实现基本的拖放没有问题。我的问题是，现在当我点击 media div 内的媒体子元素(<audio> 或 <img>)时，子元素是拖动事件的目标。有什么方法可以将拖动事件的目标重置为父元素，以便我拖动整个 media div 而不仅仅是媒体元素？我调查了e.stopPropogation()并阅读有关冒泡和捕获的信息，但我尝试使用它们的每一种方式都不能解决我的问题。有什么我想念的吗？如果可能的话，我宁愿避免使用 jQuery，并且绝对不能使用任何库或框架。
TL;DR:单击子元素时，如何使父元素成为拖动事件的目标？

<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>

这是我的代码的 HTML 部分。最初有一些更多的 php 功能可以遍历原始源 Material 以显示从原始文章导入的所有媒体元素，但我认为没有必要包含它。

Answer 1

我也遇到了这个问题。我通过简单地向每个子元素添加 draggable="false"来在没有 javascript 的情况下解决了这个问题。

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