Div가 크기를 조정할 때 크기를 조정할 수있는 div가 올라갑니다.

Question

제목이 잘못되어 죄송합니다. 문제를 올바르게 설명하는 방법을 알지 못했습니다.

div에 컨테이너를 추가하고 위치를 지정하기 위해 divs를 움직일 수 있습니다. this fidddle을보고 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

내 질문에 패션에 중복 것 같다하지만 난 그게 (검색 할 때 난 아무것도 볼 수 없었다으로) 다음 내 게시물을 삭제 더 도움이 될 수있다 생각하는 나는 대답으로이를 게시 할 예정입니다 :

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

Answer 2

나는 당신이 무슨 말을하는지 이해가 완전히 확실하지 않다.

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(); 일 : 그러나,이 #editor에 대한 CSS입니다. 그래서 저는 여기서 추측하고 있습니다 만, 당신은 덜 미친 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 인 것처럼 콘텐츠 상단에 위치하십시오.

이 정보가 조금 도움이되기를 바랍니다. 아이에게 친숙한 방식으로 문제를 자세히 설명 할 시간이 있다면, 조금 더 도와 줄 수있을 것입니다!