Question

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

我正在尝试将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);
    });
});

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.

同样，我对你在悬停时所想要的，以及点击“新容器”和你提到的$().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。

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

Answer 2

似乎我的问题是时尚复制，但我会将此作为答案发布，因为我认为删除我的帖子可能更有帮助（因为我在搜索时看不到任何内容）：

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

Div在调整大小时向上移动（并通过）可调整大小的div

2 个答案: