我有两个不同的图像,我将它们堆叠在一起。 .image-1 是背景图片,.image-2 是前景图片。我想要这样,因为前景图像是一个包含整个内部的 PNG 文件。当您浏览整个图片时,您会看到背景图片的一部分。我希望能够通过 JQuery 中的可拖动来移动背景图像。这不起作用,因为我无法触摸背景层,因为它被前景层覆盖。这是我的源代码:
CSS
.image-1
{
z-index: 0;
position: absolute;
background-image: url("image_1.png");
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-position: center;
}
.image-2
{
z-index: 1;
position: absolute;
background-image: url("image_2.png");
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-position: center;
}
HTML
<div class="image-1"></div>
<div class="image-2"></div>
JQuery
$(".image-1").draggable({});
如何通过 draggable 访问背景 div,但仍然保留我在背景中移动的图像?
编辑:
我试过这样的:
$("#image-2").mousedown(function(event)
{
$("#image-1").draggable({ });
});
但是没有用。
最佳答案
从上层获取事件并将其传递给下层。不要在每次按下鼠标时触发 draggable,而是将拖动事件传递给下层。
$(".image-1").draggable({});
$(".image-2").mousedown(function(event){
$(".image-1").trigger(event);
});
.image-1
{
z-index: 0;
position: absolute;
background:#444444;
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-position: center;
}
.image-2
{
z-index: 1;
position: absolute;
background:#ff0000;
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="image-1"></div>
<div class="image-2"></div>
关于javascript - 通过 DRAGGABLE 将一个 DIV 移动到另一个 DIV 下?(CSS,JQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29462297/