Jquery - Назначение позиции одного div с другим, когда элементы скрыты - PullRequest
Новая
       2

Jquery - Назначение позиции одного div с другим, когда элементы скрыты

1 голос
/ 03 апреля 2012

У меня есть два изображения, из которых только одно видно одновременно. Оба имеют назначенный им эффект «перетаскивания», он работает правильно, и оба изображения можно перетаскивать на экране.

Им также назначен эффект "разнесения", и код настроен таким образом, что при двойном щелчке одного изображения оно взрывается, и появляется другое (ранее скрытое) изображение. И наоборот. Короче говоря, только одно изображение видно одновременно, и при двойном щелчке на нем появляется другое изображение с эффектом «взрыва».

Моя проблема в том, что когда я дважды щелкаю одно изображение, появляющееся изображение не появляется точно в том же месте, что и предыдущее изображение. На самом деле он появляется либо в верхнем левом углу окна, либо там, где его ранее перетаскивали. Я хотел бы, чтобы появившееся изображение отображалось в том же положении, что и предыдущее изображение.

Я изучил элементы "клон" и "позиция" и не уверен, действуют ли они на скрытые элементы, так как я не могу заставить их работать (конечно, я могу делать что-то не так).

Мне нужен способ назначить положение одного элемента другому, даже если этот элемент скрыт. Я надеюсь, что есть простой не запутанный способ сделать это.

Спасибо.

Вот код: Изображения называются «робот» и «автомобиль» 

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

1 Ответ

0 голосов
/ 03 апреля 2012

Если у вас есть два изображения, и вы хотите показать другое по двойному щелчку, но хотите, чтобы они оба перетаскивали друг с другом, вам следует поместить их оба в один родительский div и установить перетаскивание этого родительского div.Тогда изображения всегда будут относительно этого родительского div (если вы правильно установите CSS).

См .:

http://jsfiddle.net/fFvLW/

...