Question

我正在开发一个界面，我需要一些可以将两个不相关的元素粘在一起的东西。那么，最重要的元素将是＆＃34;老板＆＃34;而另一个名为＆＃34; employee＆＃34;将跟随＆＃34;老板＆＃34;周围并将相应地改变它的位置。

这是标记：

<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 Developer Tools中编辑来自boss的html，.boss元素将变得越来越小并且.employee将不会相应地重新定位。我想让.employee总是重新定位自己。

稍后更新：

这http://screencast.com/t/F0RO7ODF是我正在寻找的行为。灰色框是BOSS，橙色框是EMPLOYEE。这2个元素有一个包装器，我实际上正在移动包装器。但我喜欢没有包装的解决方案。注意：组织框的位置是相关的。

Answer 1

通常，当希望元素彼此相关时，它们应该在元素中组合在一起。要表示层次结构，最好还要开发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; }

Answer 2

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

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/

我试图让老板被拖动时隐藏员工，如你的截屏视频所示。

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

2 个答案: