Kéo hình ảnh bên dưới một hình ảnh khác bằng jquery draggable

Question

Tôi có hình nền có lỗ vào để chúng tôi có thể nhìn thấy hình ảnh bên dưới. Tôi đặt một hình ảnh khác bên dưới hình nền, để nó có thể nhìn thấy qua lỗ. Bây giờ tôi cần phải kéo hình ảnh dưới đây từ lỗ trong suốt.

ảnh Bối cảnh:

Tôi đưa hình ảnh khác đằng sau nó sử dụng z-index và liên kết kéo với nó. Tôi muốn hình ảnh bên dưới có thể kéo được nếu tôi kéo vào lỗ tròn. Hiện tại nó sẽ không xảy ra khi tôi có liên kết kéo được với một div khác nằm phía sau và tôi đang kéo trên div phía trên nó. Làm thế nào tôi có thể làm cho sự kiện kéo trên div trên được tuyên truyền để div dưới đây và nó được kéo?

Tôi hy vọng tôi rõ ràng ở đây.

của tôi div:

<div class="container"> 
<div id="screen"> 
    <img src="kailash.jpg" class="drag-image" id="draggable"/> 
</div> 
<div id="bg"> 
    <img src="final.png"/> 
</div> 
</div> 

EDIT: Bất kỳ phương pháp khác để đạt được điều này cũng có thể được chấp nhận. Đã thêm JsFiddle ví dụ

EDIT: Asad đã đưa ra giải pháp tốt hơn bên dưới, nhưng nó không hoạt động trong IE và Opera. Mặc dù điều này có thể đạt được bằng cách sử dụng kích hoạt. chỉ cần thêm đoạn mã này trong dung dịch Asad của:

$("#bg").mousedown(function(event){ 
    $("#draggable").trigger(event); 
}); 

và loại bỏ:

pointer-events: none 

từ CSS. bạn có thể tìm thấy ví dụ làm việc ở đây (trình duyệt chéo): JsFiddle.

Hope this helps một số khác quá :)

Answer 1

Đây là một số đang hoạt động example. Tôi đã chỉ cần đặt pointer-events:none; trên div bg và hình ảnh chứa.

EDIT: Như Kailash đã chỉ ra dưới đây, đề nghị ban đầu của tôi là trình duyệt tương thích hơn, vì vậy tôi đang post lại nó ở đây cho hậu thế:

$('#bg').mousedown(function(ev) { 
    $('#screen').trigger(ev); 
}); 

Answer 2

Có một drag event được kích hoạt khi di chuyển div trên. Sử dụng và chỉ thay đổi vị trí của hình ảnh bên dưới theo vị trí của div