带有重叠PNG图像的jQuery Draggable答案

【问题标题】：jQuery Draggable with overlapping PNG image带有重叠PNG图像的jQuery Draggable
【发布时间】：2011-11-18 22:06:27
【问题描述】：

是否可以将 jQuery 的 Draggable 与重叠的 PNG 图像一起使用（也不能作为背景图像，因为它需要可打印）？我尝试过 CSS 样式“pointer-events: none”，但这在 IE 中不起作用。

<div id="overlap">
     <img src="overlapping.png" />
</div>

<div id="draggable">
     <img src="photoToDrag.jpg" />
</div>

【问题讨论】：

重叠是怎么重叠的？单独的 HTML 似乎表明这些是相邻的元素。他们是如何定位的？也就是说，它们的位置是绝对的吗？还是漂浮？
他们将使用绝对位置和 z-index 来确保“重叠”div 位于顶部。容器（上述代码中未显示）将使用相对位置。

标签： jquery css user-interface png draggable

【解决方案1】：

我们最终通过将鼠标事件侦听器添加到覆盖 div，然后将这些事件传递给图像来解决了这个问题。因此，任何时候单击 PNG 叠加层 ("#frame")，该单击事件都会传递到底层图像 ("#imageid")。通过这个解决方案，我们可以使底层图像可以拖动，而不会被叠加层阻挡。

$(function() {
    $( "#imageid" ).draggable();

});

$(document).ready(function () {
    // bind any events needed to the #frame element.
    $("#frame").bind("click", function (event) {
        proxy(event);
    });

    $("#frame").bind("mousedown", function (event) {
        proxy(event);
    });

    $("#frame").bind("mouseup", function (event) {
        proxy(event);
    });

    $("#frame").bind("mousemove", function (event) {
        proxy(event);
    });
});

function proxy(event) {
    $("#imageid").trigger(event);
}

HTML 的设置如下：

<div id="image">
    <img id="imageid" src="imageToDrag.jpg" style="position: relative; visibility: visible;">
</div>
<div id="frame">
    <img src="overlay.png" style="position: absolute;top: 0;left: 0; height: 100px; width: 100px;"/>
</div>

【讨论】：