Question

我正在使用jquery ui draggable库。在点击按钮上，我可以创建文本并将其附加到新div。但是我遇到了两个问题：创建的新div不会保留在父div中。换句话说，如何将可拖动的div保留在父div container中？其次，我设置了一个z-index，以便能够将一个div重叠在另一个div之上。目前最新创建的div保持领先。 make div如何可以重叠而不依赖于元素创建顺序？ 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

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

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

jsFiddle Demo

包含父项的可拖动div

1 个答案: