div 在调整大小时向上（并超过）一个可调整大小的 div答案

【问题标题】：Div is moving up (and over) a resizable div on resizediv 在调整大小时向上（并超过）一个可调整大小的 div
【发布时间】：2013-03-21 20:50:46
【问题描述】：

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

我正在尝试将 div 添加到容器中并能够移动它们以定位它们。如果您查看this fidddle 并将鼠标悬停在 div 上（不是红色的，而是包裹它的那个），您将能够单击“新建容器”按钮，它将添加一个容器。但是，如果你调整这个容器的大小，你会看到它下面的 div 跳到它上面。

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

编辑：

要重现问题，请将鼠标悬停在红色框（未打开）旁边，您将看到一个选择框出现。当它出现时单击一次，然后单击新建容器按钮。这将在红色框上方添加一个 div。如果您尝试重新调整红色框的大小，则红色 div 会向上移动。

编辑 2

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

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);
    });
});

【问题讨论】：

你必须添加代码的原因是因为一个只有 jsfiddle 链接的问题不是一个好问题。请参阅此答案和 meta 上的其他答案以获得更好的解释。 meta.stackexchange.com/a/114944
在我们讨论这个问题时，您认为您可以使用相关代码更新您的问题吗？ :) 谢谢。
相关代码和示例在jsFiddle中。当我链接到它时，在这里发布它是没有意义的，但是如果需要的话，我会扩大我的帖子......只需阅读 Meta 帖子。说得通。谢谢。
好吧，如果您阅读我链接到的答案，您会发现如果 jsfiddle 无法访问，那么根据您提供的信息，没有人能够帮助回答您的问题。因此，在您的问题中添加一些代码将帮助人们回答您的问题，无论他们是否可以使用 jsfiddle，并有助于为未来的用户提供有关该问题的一些背景信息。
@MatthewGreen - 是的，在发布后看到了（我猜我的评论编辑到晚了）。感谢您的澄清，这是有道理的。

标签： jquery css drag-and-drop draggable jquery-ui-resizable

【解决方案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.

再一次，我对悬停、单击“新容器”和你提到的 $().resizable(); 的事情感到很迷茫。所以，我只是在这里猜测，但我认为你想要不那么疯狂的 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 将位于它之前的内容之上，因为位置是fixed。

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

【讨论】：

我的问题与#editor 无关。在我的示例中，这只是一个带有按钮的面板。我将使用更详细的信息更新我的 OP 并简化我的示例。
我已经更新了我的 OP 和 jsFiddle，提供了更多信息和一个没有编辑容器的更简单的示例。

【解决方案2】：

看来我的问题在某种程度上是重复的，但我会将其发布为答案，因为我认为这可能比删除我的帖子更有帮助（因为我在搜索时看不到任何内容）：

How to prevent Resizable and Draggable elements from collapsing on each other?

【讨论】：