Jquery 拖放；使用上方的DIV调整下方图像的大小

下面是一个场景

我有一个徽标，可以通过jQueryUI拖动和调整大小（版本是1.9.2，但这并不重要），由父DIV绑定。它在拖动和调整大小方面效果很好

但是，当我尝试将一个DIV与正上方的背景图像叠加时，鼠标单击会被上方的DIV阻止

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>

CSS

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

#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;
}

为了更好地演示，下面是示例。如何绕过上述分区

以下是我读过的一些参考资料，但没有一个适用于本案例：

编辑：新小提琴：

以下是js代码：但我没有优化它，因为我认为它很容易理解

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

$（'#image'）。可调整大小（）；
$（“#draggableHelper”）.draggable({
遏制：“框架边界”，
卷轴：假
});
$（'appleLogo'）。on（'mousedown'，函数（事件）{
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

您只需要一点css/html/js shuffle，下面是代码，这里是提琴：

HTML JS 希望有帮助

最好的，

---

Josh

答案很简单，它不是基于轮廓的图像，所以它会阻挡背景图像。它是一个带有白色背景的图像。你试过轮廓图像吗？你是说透明背景？这个问题仍然存在，但我想在不可移动的标志（苹果）下加上可拖动的标志（谷歌）。如何实现？仅用于拖动，不用于调整大小。。。我不知道是哪个元素触发了点击来调整大小……可拖动的部分仍然是个问题；只有谷歌标志需要。@ShivanRaptor这是一个简单的修复，只需更改为

位置：fixed。这是小提琴：。我也更新了答案。
<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>

#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;
}

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