包含可拖动的div到父级 [英] Containing a draggable div to parent

问题描述

我正在使用jQuery ui可拖动库.在单击的按钮上，我能够创建文本并将其附加到新的div.但是我遇到了两个问题:创建的新div不包含在父div中.换句话说，如何将可拖动div保留在父div container中?其次，我设置了z-index以便能够将一个div与另一个div重叠.当前，最新创建的div位于最上方.不取决于元素创建顺序，make div如何可重叠? JSFIDDLE

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>

推荐答案

对于第一个问题，请对.container元素使用position和overflow属性:

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

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

jsFiddle演示 .

这篇关于包含可拖动的div到父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！