jQuery Draggable с перекрывающимся изображением PNG

Question

Возможно ли использовать jQuery's 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

Мы наконец решили эту проблему, добавив прослушиватели событий мыши в оверлей 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>