通过可拖动的方式将一个DIV移动到另一个DIV下(CSS，JQuery)
通过可拖动的方式将一个DIV移动到另一个DIV下(CSS，JQuery)
提问于 2015-04-05 21:14:28
我有两种不同的图像，我互相叠加在一起。. 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;
}<div class="image-1"></div>
<div class="image-2"></div>JQuery
$(".image-1").draggable({});如何通过可拖动的方式访问背景div，但仍然保留我在后台移动的图像？
编辑：
我试过这样做：
$("#image-2").mousedown(function(event)
{
$("#image-1").draggable({ });
});但这不起作用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-04-05 21:19:47
从较高层获取事件并将其传递到较低层。不要触发每个鼠标向下拖动，而是将拖动事件传递给下层。
$(".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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29462297
复制相关文章
相似问题
腾讯云开发者
