如何将两个不相关的元素粘在一起？

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 与 boss 的右上方对齐。他们应该永远坚持。但是，如果我在 chrome 开发人员工具中从老板那里编辑 html，.boss 元素将变得越来越小并且 .employee 不会相应地重新定位其自身。我想让 .employee 总是重新定位自己。

稍后更新：

http://screencast.com/t/F0RO7ODF 是我正在寻找的那种行为。灰色框是 BOSS，橙色框是 EMPLOYEE。这两个元素有一个包装器，我实际上正在移动包装器。但我想要一个没有包装的解决方案。注意：风琴盒的位置无关紧要。

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 以尊重您希望表示的层次结构。 这将强制执行您在移动 Boss 元素时在视频中显示的行为。

对于这个特定的示例，它还可以扩展为部门或角色。 参见 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; }