Question

我正在拖放HTML5方式（即没有jQuery draggable / droppable）。我有一个放置目标（一个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解决方案来通过图层转发点击事件，我可以为drop事件做类似的事情。供将来参考，以下是代码：

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

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

2 个答案: