通过DRAGGABLE将一个DIV移动到另一个DIF下?(CSS，JQuery）

Move a DIV under a another DIV via DRAGGABLE?(CSS, JQuery)

本文关键字：DIF 另一个 CSS JQuery DIV DRAGGABLE 通过 一个 移动      更新时间：2023-09-26

我有两个不同的图像，它们叠加在一起。图像-1是背景图像，图像-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>

相关文章：