2

Here is the scenario.

I have a logo which can be draggable & resizable via jQuery UI (version is 1.9.2, but it doesn't really matter), bounded by a parent DIV. It works well in dragging & resizing.

However, when I try to overlay a DIV with a background image exactly above, the mouse clicks are blocked by the DIV above.

HTML

<div id="appleLogo"></div>
<div id="frameBorder">
    <div id="draggableHelper" style="display:inline-block">
        <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
    </div>
</div>

JS

$('#draggableHelper').draggable({
    containment: "#frameBorder",
    scroll: false
});
$('#image').resizable();

CSS

#appleLogo {
    position: absolute;
    width: 400px;
    height: 400px;
    background-image: url(http://wbridgewaterschools.org/school/images/Apple%20logo.png);
    background-size: cover;
    opacity: 0.7;
    filter: alpha(opacity=70);
    z-index: 10;
}
#frameBorder {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid #F00;
    overflow: hidden;
    z-index: 1;
}

For better demonstration, here is the jsFiddle. How can I bypass the above DIV ?

Here are some references I've read, but none applies to this case:

Community
  • 1
  • 1
Raptor
  • 53,206
  • 45
  • 230
  • 366
  • The answer is simple its not an outline based image so its blocking the background image..Its an image with a white background..Have you tried with outlined images ? – coder Sep 26 '13 at 11:19
  • you mean transparent background? the problem still exists. – Raptor Sep 27 '13 at 02:15

2 Answers2

2

A little css/html/js shuffle is all you needed, code is posted below and here is the fiddle: http://jsfiddle.net/EVSZQ/10/

HTML

<div id="frameBorder">
    <div id="draggableHelper" style="display:inline-block">
        <div id="image">
            <img id="logo" src="http://wbridgewaterschools.org/school/images/Apple%20logo.png" />
        </div>
    </div>
</div>

CSS

#frameBorder {
    width: 400px;
    height: 400px;
    border: 1px solid #F00;
}
#image {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background-size: 100% 100%;
    background-image: url(http://www.google.com.br/images/srpr/logo3w.png);
}
#logo {
    position: fixed;
    width: 400px;
    height: 400px;
    opacity: .55;
}

JS

$('#draggableHelper').draggable({
    containment: "#frameBorder",
    scroll: false
});
$('#image').resizable();

Hope that helps!

Best, Josh

Joshua Robinson
  • 3,430
  • 1
  • 27
  • 35
  • the Apple logo does not have to resizable / draggable; only the Google logo requires. – Raptor Oct 03 '13 at 04:12
  • @ShivanRaptor That is an easy fix, just change to `position: fixed;` for the logo class in the css. Here is the fiddle: [http://jsfiddle.net/EVSZQ/10/](http://jsfiddle.net/EVSZQ/10/). I also updated the answer. – Joshua Robinson Oct 03 '13 at 04:22
1

edit : new fiddle : http://jsfiddle.net/EVSZQ/5/

Here is the js code : but i didn't optimize it in thinking that it will be easy to understand...

$('#image').resizable();
$('#draggableHelper').draggable({
    containment: "#frameBorder",
    scroll: false
});

$('#appleLogo').on('mousedown', function(event){
    var gxstart = $('#image').offset().left;
    var gxend = $('#image').offset().left + $('#image').width();
    var gystart = $('#image').offset().top;
    var gyend = $('#image').offset().top + $('#image').height();  

    var mouseX = event.clientX;
    var mouseY =event.clientY;

    if( gxstart < mouseX )
    {
        if ( mouseX < gxend )
        {
            if(gystart < mouseY)
            {
                if(mouseY < gyend)
                {   
                    $('#draggableHelper').trigger(event);
                }
            }
        }
    }    
});
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105