겹쳐지는 드래그 가능한 div 만들기

Question

버튼 클릭 이벤트에서 새 div가 만들어집니다. div가 생성되면 jqueryui dragable PLUGIN의 도움으로 draggable이됩니다. 내가 다른 div 위에 div를 쌓으 려 할 때 발생하는 문제에 직면하고 있습니다. 최근에 생성 된 div 요소는 맨 위에 있고 이전에 만든 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를 유지해야합니다. 먼저 CSS에 .draggable 요소 position 및 z-index 속성을 추가 :

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