[英]Drag & Resize image underneath with a DIV above
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. 我有一个徽标,该徽标可以通过jQuery UI(版本为1.9.2,但实际上并不重要)进行拖动和调整大小,并受父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. 但是,当我尝试将DIV与上面的背景图像叠加时,上面的DIV会阻止鼠标单击。
HTML 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 JS
$('#draggableHelper').draggable({
containment: "#frameBorder",
scroll: false
});
$('#image').resizable();
CSS 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 . 为了更好的演示,这是jsFiddle 。 How can I bypass the above DIV ?
如何绕过上述DIV?
Here are some references I've read, but none applies to this case: 这是我已阅读的一些参考资料,但都不适用于这种情况:
A little css/html/js shuffle is all you needed, code is posted below and here is the fiddle: http://jsfiddle.net/EVSZQ/10/ 只需一点css / html / js随机播放,代码就会发布在下面,这是小提琴: http : //jsfiddle.net/EVSZQ/10/
<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();
Hope that helps! 希望有帮助!
Best, Josh 最好,乔希
edit : new fiddle : http://jsfiddle.net/EVSZQ/5/ 编辑:新提琴: 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... 这是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);
}
}
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.