Question

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

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

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

Answer 1

我们最终通过向overlay 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>

jQuery Draggable与重叠的PNG图像

1 个答案: