包含可拖动的div到父级

Question

I am working with jquery ui draggable library. On a button on click I am able to create and append text to a new div. But I am running into two problems: the created new divs do not stay contained to the parent div. In other words How can I keep the draggable divs inside parent div container ? Second I have set a z-index in order to be able to overlap one div in top of another. Currently the latest created div stays on top. How can a make divs overlappable not depending on the element creation order? 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 position and overflow properties for your .container element:

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

jsFiddle Demo .