Creating overlapping draggable divs

Question

When the button is clicked, a new div is created. After creating a div, it becomes draggable thanks to the help of jqueryui draggable PLUGIN . I am facing a problem that occurs when I try to fold a div on top of another. The last div created will remain at the top and cannot be overridden by any previously created div. Any suggestions or solutions on how I can stack divs not forbidden / restricted by the last creation of the div element? 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

You must save the z-index draggable layer more than the rest. First add the position and z-index properties to your CSS .draggable elements:

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

And in your 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 .