創建重疊的可拖動div div

Question

在按鈕單擊事件上創建一個新的div。一旦div被創建，由於jqueryui可拖拽PLUGIN的幫助，它變得可拖動。我遇到了一個問題，當我嘗試將一個div疊加在另一個之上時發生。最新創建的div元素將保持在最前面，不能與之前創建的div重疊。任何建議或解決方案，我怎麼可以堆積divs不被禁止/限於最新的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屬性您.draggable元素的CSS：

.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。