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

Question

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

<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

我也刚刚遇到这个问题。我通过简单地将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>

Answer 2

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

\n\n

<div class="npr-import-media npr-import-audio npr-import-images" id="media-container">\n    <div class="npr-import-image-container npr-import-media-container" draggable="true" ondragstart="drag(event)" style="border:1px solid blue;padding:10px;">\n        <img class="npr-import-image" src="img.jpg" >\n        <span class="npr-import-image-caption">Caption</span>\n        <span class="npr-media-delete">X</span>\n    </div>\n\n    <div class="npr-import-add-media npr-import-media-container">\n        Add Media+\n    </div>\n</div>\n<script>\nfunction drag(e) {\n    console.log(e);\n}\nvar images = document.getElementsByTagName(\'img\');\nfor(i = 0 ; i < images.length; i++) \n    images[i].ondragstart = function() { return false; }\n</script>\n

\n\n

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

\n\n

>> DragEvent {isTrusted: true, dataTransfer: DataTransfer, screenX: 66, screenY: 161, clientX: 66\xe2\x80\xa6}\n

\n\n

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

\n\n

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

\n