Question

Is it possible to use jQuery’s Draggable with an overlapping PNG image (not as a background image, too, as it needs to be printable)? I’ve tried the CSS style “pointer-events: none,” but this doesn’t work in IE.

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

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

Answer 1

We finally solved this problem by adding mouse event listeners to the overlay div, and then passing those events to the image. So, any time the PNG overlay ("#frame") is clicked, that click event is passed through to the underlying image ("#imageid"). With this solution, we can make the underlying image draggable without the overlay blocking it.

$(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);
}

The HTML would be setup like:

<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>