Question

我正在使用wordpress的媒体导入插件。我正在尝试实施拖放功能，以重新排序用户导入的媒体元素（音频和/或图像）。我有一个<div>代码（我们称之为媒体div ），最多可包含三个<span>，<img>或{{1} }标签。因此，我将已导入的所有媒体资产显示在一行中，并希望能够拖放以重新排序媒体div 。使用html5实现基本的拖放操作没有问题。我的问题是，当我点击 media divs 中的媒体子元素（<audio>或<audio>）时，子元素是拖动事件的目标。有没有什么方法可以将拖动事件的目标重置为父元素，所以我拖动整个媒体div 而不仅仅是媒体元素？我已经查看了<img>并阅读了冒泡和捕捉，但我试图利用这些方法，但它并没有解决我的问题。有什么我想念的吗？如果可能的话，我宁愿避免使用jQuery，也绝对不能使用任何库或框架。
TL; DR：如果单击子元素，如何将父元素作为拖动事件的目标？

e.stopPropogation()

这是我的代码的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>

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

3 个答案: