jQuery-Ui resizable: размер div ограничен магическими границами

Question

, когда я пытаюсь изменить размер контейнера div (#draggableItem) после того, как он упал в указанное поле div (#newSide), он ограничен своего рода «магической границей» на левой и нижней областях.

Мой пример находится на этом jsFiddle.

Процедура:

1. Перетащите желтый ящик в середине серой области.
2. Измените размер желтого прямоугольника на нижний (или левый) конец серой области.

Я прочитал ошибку aber и попытался изменить настройки позиции: абсолютный/относительный и с! Важным тегом, но я не понимаю.

Любые идеи о том, как решить проблему? Это неправильная настройка CSS? (Для меня, это необходимо указывать в поместить Droppable область в любом месте я хочу (не только в верхней части: 0px; слева: 0px;)

Большое спасибо в любом случае

HTML код:

<div id="editor"> 
    <div id="newSide"></div> 
</div> 
<div class="draggableItem"></div> 

Код JS:

$(function() { 

$("#newSide").droppable({ 
    drop: function(event, ui) { 
    } 
}); 

$(".draggableItem").resizable({ 
        containment: "#newSide", 
        grid: 1, maxHeight: 150, maxWidth: 200, minHeight: 20, minWidth: 20 
        }) 
        .draggable({ 
          containment: "#newSide", 
          grid: [1,1] 
        }); 
}); 

CSS:

#editor{ 
    display:block; 
    position: absolute; 
    border: 2px solid red; 
    top:100px; 
    left:100px; 
} 

.draggableItem 
{ 
    width:100px; 
    height:100px; 
    background:yellow; 
} 

#newSide 
{ 
    display:block; 
    width:401px; 
    min-height:301px; 
    height:301px; 
    background-color:#444444; 
} 

Answer 1

Я не уверен, что это, где вы ищете?

HTML Структура:

<div id="editor"> 
    <div id="newSide"> 
     <div class="draggableItem"></div> 
    </div> 
</div> 

Демо: http://jsfiddle.net/QU994/13/