Как наклеить два несвязанных элемента вместе?

Question

Я работаю над интерфейсом, и мне нужно что-то, что бы связать два несвязанных элемента вместе. Ну, самым важным элементом будет «босс», а другой элемент, называемый «служащий», будет следовать за «боссом» и изменит его положение соответственно.

Это разметка:

<div class="boss"></div> 
<div class="employee"></div> 
<div class="boss"></div> 
<div class="employee"></div> 
<div class="boss"></div> 
<div class="employee"></div> 
<div class="boss"></div> 
<div class="employee"></div> 

Это JQuery я писал:

$('.boss').each(function(i, obj){ 

     var Pos = $(this).position(); 
     var ModuleWidth = $(this).outerWidth(); 

     $(this).next('.employee').position({ 
       my: 'right top', 
       at: 'right top', 
       of: $(this) 
     }); 

}); 

Так я переборе всех .boss классов и выравнивая все .employees в правом верхнем углу босса. Они должны всегда придерживаться. Но если я отредактирую html с босса в Chrome Developer Tools, элемент .boss станет меньше и больше , а .employee не будет соответствующим образом переустанавливать. Я хотел бы сделать .employee всегда перестраивать себя.

Позже Обновление:

http://screencast.com/t/F0RO7ODF Это является своего рода поведение я ищу. Серая коробка - BOSS, а оранжевый - EMPLOYEE. У этих 2 элементов есть оболочка, и я действительно перемещаю оболочку. Но я хотел бы получить решение без обертки. Примечание. Позиция блока organge является релевантной.

Answer 1

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

HTML:

<div class="boss"></div> 
<div class="employee"></div> 

<div class="boss"></div> 
<div class="employee"></div> 

JS:

$.fn.invisible = function() { 
    return this.css("visibility", "hidden"); 
}; 
$.fn.visible = function() { 
    return this.css("visibility", "visible"); 
}; 

$(".boss").draggable({ 
    stop:function(e) { 
     var employee_horizontal_position= $(this).offset().left+$(this).width(); 
     var employee_vertical_position= $(this).offset().top-$(this).height(); 

     $(this).next().visible(); 
     $(this).next().offset({top: employee_vertical_position, left: employee_horizontal_position}); 
    } 
}); 

$(".boss").on("drag", function(e){ 
    $(this).next().invisible(); 
}); 

CSS:

.boss{ 
    height: 100px; 
    width: 300px; 
    background-color: grey; 
    float:left; 
    margin-top:100px; 
} 

.boss:hover{ 
    cursor:pointer; 
} 

.employee{ 
    height: 300px; 
    width: 100px; 
    background-color: orange; 
    float:left; 
} 

JSFIDDLE Пример:http://jsfiddle.net/ktxo4f6s/2/

Я попытался сделать работник спрятанным в то время как босс тащат, как показано в вашем скринкасто.

Answer 2

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

Для этого конкретного примера его также можно разделить на отделы или роли. См JSFiddle, например: http://jsfiddle.net/9dw5dvqw/

Обновлено: http://jsfiddle.net/en85bm9h/

HTML

<ul class="bosses"> 
    <li class="boss"> 
     <span class="boss-name"></span> 
     <ul class="employees"> 
      <li class="employee"> 
       <span class="employee-name"></span> 
      </li> 
      <li class="employee"> 
       <span class="employee-name"></span> 
      </li> 
     </ul> 
    </li> 
    <li class="boss"> 
     <span class="boss-name"></span> 
     <ul class="employees"> 
      <li class="employee"> 
       <span class="employee-name"></span> 
      </li> 
      <li class="employee"> 
       <span class="employee-name"></span> 
      </li> 
     </ul> 
    </li> 
</ul> 

---

CSS

*{ margin: 0; padding: 0; } 
body, 
html{ height: 100%; } 
ul{ list-style: none; overflow: hidden; float: left; } 
li{ overflow: hidden; } 

.bosses{ width: 100%; height: 100%; } 
.boss{ margin: 20px 5px 20px 0; float: left; } 
.boss-name{ display: block; background-color: #eee; float: left; width: 120px; height: 80px; cursor: move; } 
.employees{ float: left; width: 50px; height: 120px; background-color: red; }