通過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>