javascript - 拖放到绝对定位的 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- 上触发放置事件分区?

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。