使用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拖動圖像拖動圖像到另一個圖像下

回答

相關問題