jQuery UI droppable - 它是如何工作的？

Question

我创建了一个小页面，并发现了一些有趣的行为。

当我将可拖动元素放入可放置区域时，该元素位于徽标的右侧而不是位于其下方。

这有点奇怪，因为标题和droppable是两个不同的类。

这怎么可能？感谢。

编辑：CSS。

header {
    width: 100%;
    height: 5%;

    background-color: gray;

    position: relative;

    z-index: 1;
}

header .logo {
    width: 100px;
    height: 150px;

    background-color: white;

    float: left;

    margin-left: 50px;

    position: relative;

    z-index: 1;
}

.droppable {
    width: 80%;
    height: 50%;

    background-color: red;

    float: right;

    margin: 2.5%;

    position: relative;

    z-index: 0;
}

.draggable {
    width: 10%;
    height: 15%;

    float: left;

    margin: 5%;
}

HTML :(可拖动的动态由jquery添加）

<header>
    <div class="logo"></div>
</header>
    <div class="droppable">
</div>

Answer 1

看来你有CSS问题。我建议查看并操纵logo周围的浮动，以及draggables周围的边距或边框。