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

How to stick two unrelated elements together?

本文关键字：不相关 元素 在一起 两个      更新时间：2023-09-26

我正在开发一个界面，我需要一些可以将两个不相关的元素粘在一起的东西。那么，最重要的元素是"老板"，另一个叫做"员工"的元素会跟随"老板"，并相应地改变它的位置。

这是标记：

<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 类，并将所有 .employee 与 boss 的右上方对齐。他们应该一直坚持下去。但是，如果我在 chrome 开发者工具中编辑老板的 html，.boss 元素会变得越来越大，.employee 不会相应地重新定位自己。我想让 .employee 始终重新定位自己。

后期更新：

这种 http://screencast.com/t/F0RO7ODF 就是我正在寻找的行为。灰色框是老板，橙色框是员工。这两个元素有一个包装器，我实际上正在移动包装器。但我想要一个没有包装器的解决方案。注意：组织框的位置是相关的。

我知道这已经得到了回答，但这里有一个替代方案，它不使用两个元素之间的任何层次结构（即使这可能不是最佳实践）：

.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/

我试图在老板被拖拽时隐藏员工，如您的截屏视频所示。

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; }
相关文章：