如何实现拖放操作，拖动子元素将拖动整个父元素

Question

我正在为wordpress制作媒体导入插件。 我正在尝试实现拖放功能，以重新排序用户导入的媒体元素（音频和/或图像）。 我有一个<div>标签（我们称之为媒体div ），最多可容纳三个<span> ， <img>或<audio>标签。 因此，我将已导入的所有媒体资产显示在一行中，并希望能够拖放以重新排序媒体div 。 使用html5实现基本的拖放操作没有问题。 我的问题是，当我点击媒体div中的媒体子元素（ <audio>或<img> ）时，子元素是拖动事件的目标。 有没有什么办法可以将拖动事件的目标重置为父元素，所以我拖动整个媒体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功能可以循环显示原始源材料，以显示从原始文章导入的所有媒体元素，但我认为不必包含它。

Answer 1

您可以将ondragstart事件的处理程序设置为false，如下所示：

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

在控制台输出上，您可以看到：

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

更新通过如上所述的html属性设置父元素上的拖动事件处理程序或按代码附加事件侦听器，如下所示：

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

Answer 2

我只是在同样的问题，无法解决img标签，所以切换到div。

您可以使用

<div style="background-image: url('img.jpg')"></div>

代替

<img class="npr-import-image" src="img.jpg" >

Answer 3

我刚刚遇到过这个问题。 只需在每个子元素中添加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>