2

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

我正在尝试将 div 添加到容器中，并能够移动它们以定位它们。如果您查看此小提琴并将鼠标悬停在 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);
    });
});
4

2 回答 2

0

我不完全确定我明白你在说什么。但是，这是 CSS 的#editor：

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。

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

于 2013-03-21T21:07:56.730 回答
0

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

如何防止 Resizable 和 Draggable 元素相互折叠？

于 2013-03-21T21:22:39.850 回答