通过DRAGGABLE在另一个DIV下移动一个DIV？（CSS，JQuery）

Question

我有两个不同的图像，我互相堆叠在一起。 .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({}); 

哪有我通过拖动来访问背景div，但仍然保持我在后台移动的图像？

编辑：

我想它是这样的：

$("#image-2").mousedown(function(event) 
{ 
    $("#image-1").draggable({ }); 
}); 

，但没有奏效。

Answer 1

从高层获取事件并将其传递到低层。不要在每个mousedown上触发可拖动，而是将拖动事件传递到较低层。

$(".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>