Jquery - 在隱藏元素時指定一個div的位置

我有兩個圖像，每次只有一個可見。它們都具有分配給它們的「可拖動」效果，它運行正常，並且兩個圖像都可以在屏幕上拖動。Jquery - 在隱藏元素時指定一個div的位置

它們還具有分配給它們的「爆炸」效果，並且配置了代碼，因此當您雙擊一個爆炸圖像並顯示另一個（以前隱藏）圖像時。反之亦然。簡而言之，一次只能看到一個圖像，當你雙擊它時，另一個圖像會以「爆炸」效果出現。

我的問題是，當我雙擊一個圖像出現的圖像不會出現在完全相同的地點作爲前一個圖像。它實際上出現在窗口的左上角或之前被拖動的任何位置。我希望顯示的圖像顯示在與之前圖像相同的位置。

我已經探索過「克隆」和「位置」元素，我不確定這些元素是否在隱藏元素上操作，因爲我似乎無法讓他們工作（當然，我可能會做錯事）。

我需要一種方法來將一個元素的位置分配給另一個元素，即使該元素是隱藏的。我希望有一個簡單的非複雜的方式來做到這一點。

謝謝。

下面是一些代碼：圖像被稱爲「機器人」和「車」

$(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>

來源

2012-04-03 William

能否請您發佈一些代碼，我們可以檢查？在你的情況下，我認爲一個工作jsfiddle將是首選。 – 2012-04-03 07:59:48

已添加代碼。我將嘗試讓jsfiddle實例工作。 – William 2012-04-03 08:13:21

如果你有兩個圖像，你要顯示的其他一個用於雙擊，但希望它們都可以相互拖動，那麼你應該把它們放在同一個父級div中，並將父級div設置爲可拖動。然後圖像將始終是相對於該父div（如果您設置適當的CSS）。

請參見：

http://jsfiddle.net/fFvLW/

來源

2012-04-03 08:33:19

Jquery - 在隱藏元素時指定一個div的位置

回答

相關問題