Переместить DIV под другой DIV через DRAGGABLE? (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 через draggable, но все равно сохранить изображение, которое я перемещаю в фоновом режиме?

EDITED:

Я пробовал так:

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

, но это не сработало.

Answer 1

получить событие от более высокого уровня и передать его нижнему уровню. Не запускайте draggable на каждом 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>