jQuery Draggable与重叠的PNG图像

Question

是否可以使用jQuery的Draggable与重叠的PNG图像(不是作为背景图像,因为它需要是可打印的)？我已经尝试过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添加鼠标事件侦听器,然后将这些事件传递给图像来解决此问题.因此,("#frame")只要单击PNG叠加层,该单击事件就会传递到基础图像("#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>