拖放至绝对定位 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 上触发？

- MW.

---

你能不能通过一个拖放事件将子div移动到父级，而不是使子div可拖放？ - Pete

@Pete 这不是一个子 div，而是与目标放置在同一层级。在实际代码中，它们被存储在完全不同的 DOM 树部分，并且存在多个放置目标以及多个遮挡的 div。因此，我不知道应该触发哪个放置目标，除非我可以根据鼠标位置找到正确的目标？ - MW.

你可以禁用顶部div的指针事件。然而，这在所有浏览器上都不兼容，但是有解决方法 - 可能自那个问题被提出三年以来现在也有更多的js库。 - Pete

@Pete：你的链接指向了这个网址：http://www.vinylfox.com/forwarding-mouse-events-through-layers/，正是我需要的！把它作为答案发布，我会为你接受它。 - MW.

你应该将你的代码作为回答发布在自己的问题上 - 我只是提供了一些有用的（希望如此！）指导。 - Pete

@Pete 他们确实是 :) 谢谢！ - MW.

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();
});

这也适用于元素重叠的情况，例如如果有三个遮挡层在放置目标的前面。

- MW.

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
  }));
}

- Andrey Stukalin