Contains a draggable div for the parent

Question

I am working with jquery ui draggable library. At the click of a button, I can create and add text to a new div. But I ran into two problems: the newly created divs do not remain in the parent div. In other words, how to keep draggable divs inside parent container div? Secondly, I set z-index to be able to overlap one div at the top of another. Currently, the last div created remains on top. How can I make the overlay divs independent of the order in which the element was created? JSFIDDLE

Jquery

 var z = 1; //value to make div overlappable $('#addText').click(function (e) { /** Make div draggable **/ $('<div />', { class: 'ui-widget-content', appendTo: '.container', draggable: { containment: 'parent', start: function( event, ui ) { $(this).css('z-index', ++z); } } }); }); 

HTML

 <div class="container"> <div data-bind="foreach:items" class="fix_backround"> <div href="#" class="item" data-bind="draggable:true,droppable:true"> <span data-bind="click:$parent.remove">[x]</span><br/><br/> <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center> </div> </div> 

Answer 1

For your first problem, use the position and overflow properties for your .container element:

 .container { position: relative; overflow: auto; } 

jsFiddle Demo .