2012-04-03 8 views
1

私は2つの画像を一度に1つのみ表示できます。どちらも「ドラッグ可能な」エフェクトが割り当てられており、正しく機能しており、両方の画像を画面上にドラッグできます。Jquery - 要素が隠されているときに1つのdivの位置を別の要素に割り当てる

これらの画像には「爆発」効果が割り当てられており、コードが設定されているので、爆発する画像をダブルクリックすると他の(以前は隠れた)画像が表示されます。およびその逆。つまり、一度に表示できる画像は1つのみで、ダブルクリックすると「爆発」エフェクトごとに1つの画像が表示されます。

私の問題は、画像をダブルクリックすると、表示される画像が前の画像とまったく同じ場所に表示されないということです。実際には、ウィンドウの左上隅または以前にドラッグされた場所に表示されます。私は、現れるイメージを前のイメージと同じ位置に表示したい。

"クローン"と "位置"の要素を調べて、これらの要素が隠れた要素で動作するかどうかはわかりません(私は間違ったことをしているかもしれません)。

要素が隠されていても、ある要素の位置を別の要素に割り当てる方法が必要です。私はこれを行う単純な非畳み込みの方法があることを望んでいます。

ありがとうございました。ここで

はいくつかのコードです: あなたは2枚の画像を持っていて、他を表示したい場合は、画像が「ロボット」と「車」

$(document).ready(function(){ 

$('#car').draggable({ 
    drag: function(event, ui) { 
     var lastLeft = ui.helper.data('lastLeft') || 9999999; 
     if (ui.offset.left < lastLeft) { 
      // must be moving left 
      $('#myImage').attr('src', 'leftCar.png'); 
     } else { 
      // must be moving right (or vertically) 
      $('#myImage').attr('src', 'rightCar.png'); 
     } 
     ui.helper.data('lastLeft', ui.offset.left); // store the last position 
    } 
}); 












$("#car").dblclick(function() { 
     $(this).hide("explode", 1000); 
     $("#robot").show("explode", 1000); 


}); 


$("#robot").hide(); 
$('#robot').draggable({}); 
$("#robot").dblclick(function() { 
     $(this).hide("explode", 1000); 
     $("#car").show("explode", 1000); 


}); 

HTML

<body> 




     <div id="car"> 
<img id="myImage" src="leftCar.png" alt="" height="200" width="200" /> 
</div> 


<div id="robot"> 
<img id="myImage" src="robot.png" alt="" height="200" width="200" /> 
</div> 


</body> 
+0

あなたは私たちがチェックすることができますいくつかのコードを投稿してくださいもらえますか?あなたの場合、私は働いているjsfiddleが好まれると思います。 –

+0

コードが追加されました。私はjsfiddleインスタンスを動作させようとします。 – William

答えて

0

と呼ばれています1つはダブルクリックしますが、両方ともドラッグしたい場合は、両方を同じ親divに配置し、その親divをドラッグ可能に設定する必要があります。その後、画像は常にその親divとの相対的な関係になります(CSSを適切に設定した場合)。

参照:

http://jsfiddle.net/fFvLW/

関連する問題