5

背景画像に穴が開いているので、その下にあるものを見ることができます。背景画像の下に別の画像を配置して、穴から見えるようにします。今、透明な穴から下の画像をドラッグする必要があります。

背景画像: ここに画像の説明を入力

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 では機能しません。これはトリガーを使用して実現できますが。このコードを Asad のソリューションに追加するだけです。

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

そして削除します：

pointer-events: none

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

これが他の人にも役立つことを願っています:)

4

2 に答える 2

5

これが実際の例です。私は単純pointer-events:none;に bg div と含まれている画像を設定しました。

編集:カイラッシュが以下で指摘しているように、私の最初の提案はブラウザとの互換性が高いため、後世のためにここに再投稿しています:

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

上記のdivを移動すると発生するドラッグイベントがあります。それを使用して、divの位置に応じて下の画像の位置を変更するだけです

于 2012-10-24T11:37:55.267 に答える