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

Question

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

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

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

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

jsFiddle Demo link

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 или изображения будут вставляться в одном месте: top: 10; Слева: 10.