5

我有一个背景图像，其中有一个洞，以便我们能够看到它下面的内容。我在背景图像下方放置了另一个图像，以便通过孔可以看到它。现在我需要从透明孔中拖动下面的图像。

背景图片： 在此处输入图像描述

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

希望这对其他人也有帮助:)

4

2 回答 2

5

这是一个工作示例。我只是pointer-events:none;在 bg div 上设置并包含图像。

编辑：正如 kailash 在下面指出的那样，我最初的建议是更兼容浏览器，所以我在这里重新发布它以供后代使用：

$('#bg').mousedown(function(ev) {
    $('#screen').trigger(ev);
});
于 2012-10-24T11:41:28.130 回答
1

移动上面的 div 时会触发一个拖动事件。使用它，只需根据 div 的位置更改下图的位置

于 2012-10-24T11:37:55.267 回答