使用jquery draggable将图像拖动到另一个图像下方

我有一个有洞的背景图片,所以我们可以看到它下面的什么.
我在背景图像下方放置了另一张图像,以便透过孔可见.现在我需要从透明孔中拖动下面的图像.

背景图片：

我使用z-index在其后面放置另一个图像并将draggable与它相关联.如果我拖动圆孔,我希望下面的图像可以拖动.
目前它不会发生,因为我已经关联拖拽与另一个div落后,我拖着它上面的div.如何让上面的div上的拖动事件传播到div下面并被拖动？

我希望我在这里很清楚.

我的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>

编辑：任何其他实现这一目标的方法也可以接受.
添加了JsFiddle示例

编辑：Asad在下面提供了很好的解决方案,但它在IE和Opera中不起作用.虽然这可以通过使用触发器来实现.
只需在Asad的解决方案中添加此代码：

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

并删除：

pointer-events: none

来自CSs.你可以在这里找到工作示例(跨浏览器)：JsFiddle.

希望这也有助于其他人:)

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