Question

在按钮单击事件上，将创建一个新div。一旦div被创建，由于jqueryui draggable PLUGIN的帮助，它变得可拖动。我遇到了一个问题，当我尝试将div叠加在另一个上面时发生。最新创建的div元素将保持在顶部，并且不能与任何先前创建的div重叠。有关如何堆叠div的任何建议或解决方案都不会被禁止/限制为最新的div元素创建？ JSFIDDLE

Jquery的

$('#button').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'draggable ui-widget-content',
        text: $('textarea').val(),
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent'
        }
    }).addClass('placement');


    /** Contain draggable div **/
    $('.middle-side').parent().mousemove(function(e){
        var offset = $(this).offset();
        var relX = e.pageX - offset.left;
        var relY = e.pageY - offset.top;
        $('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'});
    })

});

/** Place a temporary dashed border on div after initial creation**/
$('.middle-side').on('click', function(e){
    var offset = $(this).offset();
    var relX = e.pageX - offset.left;
    var relY = e.pageY - offset.top;
    $('.placement').css({'top': relY,'left': relX, 'position': 'absolute' });
    $(this).off("mousemove").find('.placement').removeClass('placement')    
});

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea>
<br/>
<input type="button" id="button" value="Add Div with Text" />
<br/>
<div>
    <div class="middle-side empty"></div>
</div>

Answer 1

您应该保留可拖动图层的z-index比其他图层更多。首先将position和z-index属性添加到CSS中的.draggable元素：

.draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    background:#FFFFDD;
    position: relative;
    z-index: 1;
}

在你的JS中：

// the counter
var z = 1;

$('<div />', {
    class: 'draggable ui-widget-content',
    text: $('textarea').val(),
    appendTo: '.middle-side',
    draggable: {
        containment: 'parent',

        // whenever the drag start
        start: function( event, ui ) {
            // set the z-index one more
            $(this).css('z-index', ++z);
        }
    }
}).addClass('placement');

jsFiddle Demo。

创建重叠的可拖动div

1 个答案: