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

Question

我创建了一个小页面，并注意到一些有趣的行为。

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

这有点奇怪，因为 header 和 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。