jquery - Div 在调整大小时向上(并超过)可调整大小的 div

Question

抱歉，我不知道如何正确解释这个问题。

我正在尝试将 div 添加到容器中，并能够移动它们来定位它们。如果你看this fidddle并将鼠标悬停在 div 上(不是红色的，而是包裹它的那个)，您将能够单击“新容器”按钮，它将添加一个容器。但是，如果调整此容器的大小，您将看到其下方的 div 跳到其顶部。

我做错了什么还是这是预期的功能？我不希望有任何重叠，并且理想情况下希望新的 div 位于现有 div 的上方或下方(基于您拖动它的位置)。

编辑:

要重现该问题，请将鼠标悬停在红色框旁边(而不是打开)，您将看到一个选择框出现。出现此信息时单击一次，然后单击“新建容器”按钮。这将在红色框上方添加一个 div。如果您尝试重新调整红色框的大小，则红色 div 会向上移动。

编辑2

好的，我已经注意到“为什么”会发生这种情况。 JQuery 将元素更改为在调整大小时绝对定位，因此这会停止 float 工作。有什么办法可以去掉这个吗？

HTML:

<div class="editable_content" style="padding:10px;">
    <div style="width: 100%; padding:10px; height: 400px;">
        <div style="width:100%; float:left; height:100px; background:red"></div>
    </div>
</div>

<input type="button" id="new_container" value="New Container" />

CSS:

.edit_mouse_on {
    background-color: #bcd5eb !important;
    outline: 2px solid #5166bb !important;
}
.edit_selected {
    outline: 2px solid red !important;
}

.ui-resizable-helper { border: 2px dotted #00F; }

JS:

var prevElement = null;
var selectedElement;
var enableHoverAction = true;
var allowedEditableClasses = "editable_content"
var hoverClass = "edit_mouse_on";
var selectedClass = "edit_selected";

document.addEventListener('mousemove', function (e) {
    var elem = e.target || e.srcElement;
    if (prevElement != null) detach(prevElement);
    attach(elem);
    prevElement = elem;
}, true);

function attach(obj) {
    if (enableHoverAction) {
        if (obj != null) {
            if ($(obj).parents("div.editable_content").length) {
                $(obj).addClass(hoverClass);
                $(obj).bind("click", function (e) {
                    e.preventDefault();
                    select(this);
                });
            }
        }
    }
}

function select(obj) {
    selectedElement = obj;
    enableHoverAction = false;
    $(obj).addClass(selectedClass);
    $(obj).removeClass(hoverClass);
}

function detach(obj) {
    if (enableHoverAction) {
        if (obj != null) {
            $(obj).removeClass(hoverClass);
            $(obj).unbind("click");
        }
    }
}

$(document).ready(function () {
    $("#new_container").click(function () {
        $("<div/>", {
            "style": "border:1px solid black; width:100px;height:100px; float:left;margin-bottom:1px;display:inline;clear:both",
            text: "",
        }).resizable({
            helper: "ui-resizable-helper"
        }).draggable({
            cursor: "crosshair",
            cursorAt: {
                top: 0,
                left: 0
            }
        }).prependTo(selectedElement);
    });
});

Answer 1

我不完全确定我理解你在说什么。但是，这是 #editor 的 CSS:

width: 80%; // cool.
height: 150px; // alright.
float: left; // okidoke.
background-color: lightgrey; // pretty.
position: absolute; // wait. what?
bottom: 0; // k.
left: 0; // right.
position: fixed; // ok, what the heck.
margin-left: 10%; // sure, why not.

再次，我对您要进行的悬停、单击“新容器”和您提到的 $().ressized(); 内容感到非常迷失。所以，我只是在这里猜测，但我认为你想要不那么疯狂的 CSS。

最终应用于该元素的样式是:

width: 80%;
height: 150px;
background-color: lightgray;
bottom: 0;
left: 0;
position: fixed;
margin-left: 10%;

position:absolute; 和 float:left 被 position:fixed; 无效，甚至可以简化为:

width: 80%;
height: 150px;
background-color: lightgray;
bottom: 0;
left: 10%;
position: fixed;

无论如何，#editor 将位于其之前的内容之上，因为位置是固定。

希望这些信息对您有所帮助。如果您有时间以 child 友好的方式详细说明问题，我也许可以提供更多帮助!