jquery - 使用上方的 DIV 拖动下方的图像并调整其大小

Question

这是场景。

我有一个 Logo ，可以通过 jQuery UI(版本是 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>

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

为了更好地演示，这里是 jsFiddle .我怎样才能绕过上面的 DIV ？

这是我读过的一些引用资料，但没有一个适用于这种情况:

• How to prevent Resizable and Draggable elements from collapsing on each other?
• Drag & Resize div overlapped other div

Answer 1

您只需要一点 css/html/js shuffle，代码贴在下面，这里是 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();

希望对您有所帮助!

最好的，乔希