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

Question

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

背景图片：

我正在使用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。

希望这也有助于其他人：）

Answer 1

这是一个有效的example。我只需在bg div上设置pointer-events:none;并包含图像。

编辑：正如kailash在下面指出的那样，我的原始建议更兼容浏览器，所以我将其重新发布给后人：

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

Answer 2

移动上面的div时会触发drag event。使用它，只需根据div的位置改变下图的位置