JQuery UI - Динамически добавляемые изменяемые размеры и перетаскиваемые элементы div выходят за пределы содержимого

Question

Просьба пройти через демонстрационную ссылку скрипки. Когда пользователь добавляет новый текст в ParentDIV, добавленный слой выходит за рамки размера родительского слоя.

Попробуйте нажать кнопку 3 или 4 раза, и вы заметите, что новый текстовый слой будет за пределами родительского слоя.

Можем ли мы ограничить добавленные слои внутри слоя? Есть ли какая-то логика в элементах управления JqueryUI?

Пожалуйста помоги.

Демоверсия jsFiddle

Answer 1

Попробуй это:

.dragClass {
   display: inline-block;
   float: left
}

$(".dragClass")
    .draggable({
        stack: "div",            
        cursor      : "move",
        delay       : 100,
        scroll      : false,
        containment : "parent",
        refreshPositions: true,
        scroll: true
    })

http://jsfiddle.net/e2yfC/18/

Answer 2

Вместо этого я выбрал другое решение, которое устанавливает позицию вновь добавленного div, т.е. верхнюю и левую позиции. Таким образом, недавно созданный div или изображения будут прикреплены в одном месте, скажем, top:10; Слева:10.