Div над другим блоком

[CarterSS]

Имеется несколько блоков:

<div id="container" style="position: absolute;">
             <div id="ui" style="width:150px;height:50px; position: absolute; background:red"> </div>
             <div id="controls" style="width: 150px; height: 50px;"></div>
       </div>

Суть задачи в том, что когда меняем положение или размер блока "controls", то и блок "ui" повторял эти же действия.
Примерный код js для изменения положения блоков:

controls.style.top = e.pageY +'px' ;
    controls.style.left = e.pageX+ 'px';     
    ui.style.top = controls.style.top;
    ui.style.left = controls.style.left;

но блок "ui" не двигается. В чем подвох не понимаю, но если "controls" обернуть в еще один блок, то все работает.
Как правильно организовать структуру блоков?

[Coriolan161]

CarterSS,
1) У тебя задан position: absolute для ui? Если нет, то он тебя будет в рутСкоуп посылать с твоими top и left

2) А нельзя написать функцию которая принимает элемент и прводит манипуляции со style и вызвать её для ui и controls?

[ksa]

когда меняем положение или размер блока "controls", то и блок "ui" повторял эти же действия

Зачем тогда таскать дочерние элементы? Таскай родителя, а там и дети подтянутся...

[CarterSS]

Суть в том, что родитель и дочерний элемент "controls" не всегда нужны, после перетаскивания я уберу их и как тогда изменится положение "ui"?

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

[ksa]

Суть в том, что родитель и дочерний элемент "controls" не всегда нужны, после перетаскивания я уберу их и как тогда изменится положение "ui"?

Можно не убирать, а просто спрятать...

как бы Вы организовали такую задачу, когда два дочерних элемента свободно перемещаются по родителю, но при этом не перемещать родителя

Так они у тебя должны перемещаться "синхронно".
Самый простой вариант - поместить перемещаемые элементы в один контейнер и таскать уже его.

[CarterSS]

Тогда скажите, в чем проблема в данном случае, когда один элемент меняет положение, а второй на остается на месте, хотя оба позиционированы абсолютно и обоим одновременно меняю top/left?
Вот пример поведения, не понимаю, относительно чего позиционируется "ui" :

[Coriolan161]

CarterSS,
Давай все что есть

[Dilettante_Pro]

CarterSS,
Судя по фрагменту html, у вас на разных элементах одинаковые id.
В таком случае поведение элементов непредсказуемо.

[CarterSS]

Судя по фрагменту html, у вас на разных элементах одинаковые id.
В таком случае поведение элементов непредсказуемо.

Это просто запись в логе, объекта всего два.

Нашел причину поведения: ui.style.property перестает работать после того, как добавляю элемент "controls", а делаю это следующим образом:

var ui = document.getElementById('ui');
    var container = ui.parentNode; 
    markup = '<div class="ft-controls"><div>';
    container.innerHTML = container.innerHTML + markup;  
    controls = container.getElementsByClassName('ft-controls');

Исправил кривизну

markup = '<div class="ft-controls"><div>';
    container.innerHTML = container.innerHTML + markup;

на

controls = document.createElement('div');
    controls.className = 'ft-controls';  
    container.appendChild(controls);

Теперь ui.style.property работает.