使用 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 的位置更改下图的位置