拖放到div到绝对定位的div后面

Question

我正在以HTML5方式进行拖放（即，没有jQuery可拖放/可拖放）。我有一个放置目标（一个div），该目标被另一个绝对定位的div部分遮挡，如下所示：

<div id="drop-target" style="width:100%; height:500px; background-color:blue;" />

<div id="obscuring-div" style="width:40%; height:150px; position:absolute; top:10px; left: 10px; background-color:red;" />

当我将物品放到绝对位置的obscuring-div上时，有什么方法可以使drop-target而不是obscuring-div上的放下事件触发吗？

Answer 1

Pete的评论使我想到了一个JavaScript解决方案，用于通过层转发点击事件，并且我可以对放置事件做类似的事情。为了将来参考，下面是代码：

var element = $('#drop-target');
// This element should be droppable
element.on('dragover', function (event) {
    event.preventDefault();
});
// This element should be droppable
element.on('dragenter', function (event) {
    event.preventDefault();
});

element.on('drop', function (event) {
    // Find position of drop event
    var xPos = event.originalEvent.clientX,
        yPos = event.originalEvent.clientY;

    // Temporarily hide this element
    element.hide();

    // Find the element that is the real drop target
    var dropTargetBelow = $(document.elementFromPoint(xPos, yPos));

    // Trigger the drop event on real drop target
    dropTargetBelow.trigger(event);

    // Show this element again
    $(this).show();
});

[当元素堆叠时也可以使用，例如，如果放置目标前面有三个模糊的div。

Answer 2

仅作记录：使用elementsFromPoint方法和本机dispatchEvent的类似方法：

someHandler(event): {
  let elements = document.elementsFromPoint(event.clientX, event.clientY);
  let target = elements.find(e => e.matches('#obscuring-div'));
  target.dispatchEvent(new DragEvent('drop', {
    // anything you need to pass; works without that in the simplest case
  }));
}