Div正在向上移动（可重新调整大小的div）

Question

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

我想将div添加到容器并能够移动它们来定位它们。如果您查看this fidddle并将鼠标悬停在div上（而不是红色包装它），您将能够单击“New Container”按钮并添加一个容器。但是，如果您调整此容器的大小，您会看到它下面的div跳到最上面。

我做错了什么或者是这个预期的功能？我不希望有任何重叠，并理想地喜欢新的div要么高于或低于现有的div（基于你拖动它的位置）。

编辑：

要重现该问题，请停旁边的红色方框（不是），你会看到一个选择框出现。出现此情况时单击一次，然后单击新建容器按钮。这将在红色框上方添加一个div。如果您尝试重新调整红色框的大小，那么红色的div会向上移动。

EDIT 2

好，我已经注意到了 “为什么”，这种情况正在发生。 JQuery将元素更改为绝对定位在resize上，以便停止浮动工作。有什么办法可以消除这种情况吗？

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

看来我的问题是，在一个时尚一个重复的，但我会张贴此作为一个答案，因为我认为它可能会更有帮助，然后删除我的帖子（因为我看不到任何东西搜索时）：

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

Answer 2

我不完全明白你在说什么。但是，这是#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。

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