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

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

背景画面： enter image description here

我身后用的z-index和关联拖动一下它把另一幅图像。如果我拖动圆形孔，我希望下面的图像可拖动。目前它不会发生，因为我已经关联可拖动与另一个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中不起作用。虽然这可以通过使用触发器来实现。从CSS

pointer-events: none

：只是阿萨德的解决方案添加以下代码：

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

和删除。你可以在这里找到工作示例（跨浏览器）：JsFiddle。

希望这有助于一些别人太:)

来源

2012-10-24 kailash19

能否请您做的jsfiddle？ –

这里是：http://jsfiddle.net/kailash19/DZK4w/1/ – kailash19

我已经更新了你的小提琴 –

这里的位置改变下面图像的位置是一个工作example。我只是在bg div上设置了pointer-events:none;并包含图像。

编辑：由于神山指出下面，我原来的建议是多浏览器兼容的，所以我在这里重新张贴它为后人：

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

来源

2012-10-24 11:41:28

其作品，谢谢。你能解释一下吗？也从图像的任何部分拖动，我可以以某种方式使它只能在单击孔时拖动？ – kailash19

是的，我现在正在努力。解释很简单;将指针事件设置为none意味着该元素现在对鼠标交互是透明的。 –

好的，谢谢，我真的很感谢你的努力 – kailash19

有移动上述股利时被轰出了drag event。请使用，只是根据DIV

来源

2012-10-24 11:37:55 Flo

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

回答

相关问题