Enable dragging in element below overlay using jQuery UI

Question

I have an unusual situation where I would like to enable dragging and re-sizing to an image that sits behind another image overlay in html. It looks like this.

enter image description here

The image in the background (ie: the coke bottle) is made resizable and draggable using jQuery UI. However the problem lies in trying to drag the image when clicking within the bounds of the overlaid image. This obviously fails because the overlaid image sits ontop of the draggable element and is just a transparency.

This is the html and javascript being used.

$(".Overlay").draggable({ containment: "#divPhone", scroll: false }).resizable();

<div id="divPhone" style="position: relative;">
    <div style="display: inline-block;" class="Overlay"><img src="ImageSource.png" style="width: 100%;height: 100%;" /></div>
    <div style="position: absolute; left: 85px; top: 0px;"><img src="ImageSource.png" style="width: 240px;" /></div>
</div>

Could anyone suggest any workarounds for this problem? The only solution I can think of is switching the indexes of the images when a click event occurs but assume there must be a better solution.

enter image description here

You can set `pointer-events:none;` to the overlay layer in CSS. However, you're stuck in terms of IE. — ahren, Oct 21 '13 at 12:22
oh bugger, I didn't see your comment until after I'd posted the bounty... :-0 You should have just posted it as an answer cause it seems to work in IE also. — Maxim Gershkovich, Oct 23 '13 at 13:24
There's a question closely realted to this: http://stackoverflow.com/questions/5855135 @ahren it basically uses your solution but with a fallback for IE-fail. Just add the comment as answer :P — Joel Peltonen, Oct 23 '13 at 13:26
@Nenotlep, Interesting, thanks for the extra references. It will still be nice for this question to get some more interest and info provided so hopefully bounty wasn't a complete waste, lol. — Maxim Gershkovich, Oct 23 '13 at 13:29
I'm interested to see if someone can come up with a non `pointer-events` solution — Zach Saucier, Oct 23 '13 at 14:07
@Zeaklous Check my answer out and let me know what you think — Chase, Oct 24 '13 at 19:09

ahren · Accepted Answer · 2013-10-24T01:19:53.427

As I mentioned in the comments, you can sent the CSS to pointer-events:none;.

This may not work on IE (all versions), unless you're using SVG elements. It seems they voted to remove pointer-events because you could potentially hijack other peoples links with it.

As other people have mentioned in the answers to similar questions, you can forward the events through layers which uses the document.elementFromPoint method. Using a simple show/hide technique you can hide the masking layer briefly, check what's at the point underneath and re-show the masking layer. This happens so fast the browser won't render the mask disappearing. However, since you want to drag and resize, there are a lot of events fired when you're moving the mouse and whatnot, so you might notice it gets quite laggy with this technique.

score 1 · Answer 2 · answered Oct 23 '13 at 14:50

Hmm, if I'm understanding this correctly; I think it can be achieved using slightly different HTML mark-up, and altering the overflow. This would alleviate the problem of layered elements.

<div id="phone">
    <!--
    The phone screen, the "white bit" of the phone; the position and dimensions
    of this will need to be changed.
    -->
    <div id="phone_screen" style="overflow: hidden">
        <img id="phone_img" />
    </div>
</div>

#phone Serves as a container, essentially wrapping the phone screen and image
#phone_screen Serves as the container for the image being moved and resized
#phone_img The main image that is set to draggable and resizable.

With this structure, the image should be draggable and re-sizable. It may be worth adding some padding to the #phone_screen to ensure the user can reach the edges of the image to resize it.

score 1 · Answer 3 · answered Oct 24 '13 at 02:22

Here is a more javascript style approach to accomplish what you are trying to do:

http://jsfiddle.net/nL5ew/

Basically I have added a 3rd element in the wrapper. A div that will act as an invisible handle for the image that will be dragged and resized. Then using the events in jquery ui for drag and for resize i make sure that the image mimics what the handle is doing. Resize offers a handy option for alsoResise making this a little easier.

Using this approach the "handler" is now in top thus clicking anywhere the background image will be is possible.

HTML:

<div id='workbox'>
    <img src="http://tryimg.com/4/01.png" id="drag-resize-me" />
    <img src="http://tryimg.com/4/phone.png"id="phone"/>
    <div id="handle"></div>
</div>

CSS:

#workbox{
    width: 401px;
    height: 511px;
    position: relative;
    border: 5px #000 solid;
    overflow: hidden;
}
#phone{
    position: absolute;
    top: 0;
    left: 0;
}
#drag-resize-me{
    position: absolute;
    top: 0;
    left: 0;
}
#handle{
    border: 1px #ccc solid;
}

JAVASCRIPT:

$(function(){
    $('#handle').css('height',$('#drag-resize-me').height()).css('width',$('#drag-resize-me').width());
    $("#handle").draggable({
        drag: function(event,ui)
        {
            $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top);
        }
    });
    $("#handle").resizable({
        alsoResize:'#drag-resize-me',
        handles: 'all',
        resize: function(event,ui)
        {
            $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top);
        }
    });
});

But you must also restrict the clicks to the iPhone's screen. I what I meant to say in the comments is "I'm interested to see if someone can come up with a pure CSS, non pointer-events solution — Zach Saucier, Oct 24 '13 at 20:14

Enable dragging in element below overlay using jQuery UI

3 Answers3