Как поместить один элемент точно в ту же видимую позицию, что и другой? - PullRequest
Новая
       4

Как поместить один элемент точно в ту же видимую позицию, что и другой?

3 голосов
/ 21 июля 2010

У меня есть два элемента "src" и "dest"

"src" и "dest" находятся в разных DOM-узлах, которые не могут иметь одного и того же родителя.

Мне нужно поместить элемент "src" в ту же видимую позицию, что и "dest".

Элемент "src" также должен иметь те же размеры, что и "dest".

У меня есть следующий код для случая, когда "src" и "dest" имеют одного и того же родителя: 

src.css("position", "absolute");
src.css("top", dest.offset().top);
src.css("left", dest.offset().left);
src.width(dest.width());

// Show "src" element, instead of "dest". "src" must be in the same visible position, as "dest"
dest.css("opacity", 0);
src.show();

К сожалению, это не работает. Элемент "src" имеет смещение вниз и влево, для этого я не могу найти причину.

Может быть, я что-то не так делаю ...

Как правильно сделать это для двух случаев?

  1. "src" и "dest", имеющие одного и того же прародителя
  2. "src" и "dest" не имеют одного и того же родителя. Может быть, пра-пра-пра-прародитель общий для обоих.

Обновление:

Я подготовил простой документ HMTL, который выполняет простую визуальную замену одного элемента другим: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MacBlog</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
    <style type="text/css" media="screen">
        .dest {
            background-color: #0cf;
            width: 480px;
            height: 320px;
        }
        .src {
            background-color: #09c;
            width: 1024px;
            height: 768px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        jQuery(function($){
            // Common items, to deal with
            var src = $(".src");
            var dest = $(".dest");
            // Setup
            src.hide();
            // Interaction
            dest.click(function(){
                src.width(dest.width());
                src.height(dest.height());
                src.offset(dest.offset());

                dest.hide();
                src.show();
            });

        });
    </script>
</head>
<body>
    <div>
        <!--On clicking, this element should visually be swapped by ".src" element -->
        <div class="dest"><p>dest</p></div>
        <div class="src"><p>src</p></div>
    </div>
</body>
</html>

Не работает правильно. После «свопинга» элемент «src» имеет странное смещение в верхнем левом направлении на ~ 30 пикселей.

Я использую последнюю версию Safari 5, если в этом есть смысл.

Обновление 2:

К сожалению, это также не работает. Я обновил мой пример: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MacBlog</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
    <style type="text/css" media="screen">
        div {
            margin: 0;
            padding: 0;
        }
        .holder {
            position: relative;
            top: 40pt;
            left: 40pt;
            border: black solid thin;
        }
        .dest {
            background-color: #0cf;
            width: 480px;
            height: 320px;
        }
        .src {
            background-color: #09c;
            width: 1024px;
            height: 768px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        jQuery(function($){
            // Common items, to deal with
            var src = $(".src");
            var dest = $(".dest");
            // Setup
            src.hide();
            // Interaction
            dest.click(function(){
                src.css("position", "absolute");
                src.width(dest.width());
                src.height(dest.height());
                src.offset(dest.offset());

                dest.hide();
                src.show();
            });

        });
    </script>
</head>
<body>
    <div class="holder">
        <!--On clicking, this element should visually be swapped by ".src" element -->
        <div class="dest"><p>dest</p></div>
        <div class="src"><p>src</p></div>
    </div>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 21 июля 2010

Необходимо сделать элемент dest абсолютным, иначе смещения top и left не будут применяться. 

src.css('position', 'absolute'); // ensure position is set to absolute
src.offset(dest.offset());

Кроме того, такие элементы, как p и body, будут иметь таблицы стилей по умолчанию в зависимости от браузера. Поэтому попробуйте ввести стиль сброса, чтобы все было согласованно: 

p {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
}
1 голос
/ 21 июля 2010

Я проверил это здесь: http://jsfiddle.net/YEzWj/1/

Используя ваш второй пример, сделайте ваш CSS следующим образом: 

div { 
    position:relative;
    margin: 0; 
    padding: 0; 
} 
.holder { 
    position: relative; 
    top: 40pt; 
    left: 40pt; 
    border: black solid thin; 
} 
.dest { 
    position:absolute;
    background-color: #0cf; 
    width: 480px; 
    height: 320px; 
} 
.src { 
    background-color: #09c; 
    width: 1024px; 
    height: 768px; 
}

РЕДАКТИРОВАТЬ: После игры с ним, он не работал ввсе обстоятельства.Я решил изменить JavaScript.Примечание: Мой пример переключает отображение src и dest внутри держателя, делая размер такого же размера, что и dest, поэтому граница отображается за пределами dest и src. 

jQuery(function($){ 
    // Common items, to deal with 
    var src = $(".src"); 
    var dest = $(".dest");
    var holder=$(".holder");
    holder.width(dest.width()); 
    holder.height(dest.height());
    // Setup 
    src.hide(); 
    // Interaction 
    dest.click(function(){ 
        src.show();
        src.css("position", "absolute"); 
        src.width(dest.width()); 
        src.height(dest.height()); 
        src.offset(dest.offset()); 
        dest.hide();
     }); 
    src.click(function(){ 
        dest.show();
        src.hide(); 
    }); 

});

EDIT2: Удалить src.click ()событие, если вы не хотите возвращаться к месту назначения по щелчку мыши.

0 голосов
/ 21 июля 2010

Вы можете вызвать функцию offset , чтобы установить смещение и правильно обрабатывать разных родителей, например: 

dest.offset(src.offset());
...