jquery draggableを使用して別の画像の下に画像をドラッグ

Question

私は穴がある背景画像を持っているので、その下の画像を見ることができます。 別のイメージを背景イメージの下に配置して、そのイメージをそのホールを通して見えるようにします。今私は透明な穴から画像の下にドラッグする必要があります。

背景画像：それはZインデックスを使用して、それにドラッグ可能な関連付けの後ろに、私は別の画像を配置しています

。円形の穴にドラッグすると、下の画像がドラッグ可能になります。 現在、私は後ろにある別のdivとdraggableを関連付けており、その上に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> 

EDIT：これを達成するために、任意の他のアプローチも受け入れることができます。 JsFiddleの例を追加

編集：Asadは以下の素晴らしいソリューションを提供していますが、IEとOperaでは動作しません。これはトリガーを使用することで実現できますが、

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

をし、削除します： だけアサドのソリューションにこのコードを追加

pointer-events: none 

をCSSから。ここで実際の例を見つけることができます（クロスブラウザ）：JsFiddle。

希望これは、上記のdivを移動するときに発生するdrag eventがありすぎ:)

Answer 1

ここには作業中のexampleがあります。私は単純にpointer-events:none;をbg divと含まれるイメージに設定しました。

EDIT：カイラスは以下の指摘のように、私の元の提案は、より多くのブラウザの互換性がありますので、私は後世のためにここでそれを再投稿しています：

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

Answer 2

いくつかの他のことができます。それを使用して、divの位置に応じて下の画像の位置を変更してください