Add div element on click in a certain coordinate using jquery

by aljon254

HTML

<div id="layoutSpace">
        Click Anywhere inside this box
    </div>

CSS

#layoutSpace{
			width:450px;
			height:450px;
			background:#F4F4F4;
			margin:auto;
            position:relative;
		}

.dbox{
    width:100px;    
    height:100px;
    border:1px solid #C9C9C9;
    position:absolute;      
}

JavaScript

$('#layoutSpace').click(function(e){			 
    var offset = $(this).offset();  
    areaBox = 50;//to center the mouse point
    mouseX = (e.pageX - offset.left - areaBox );
    mouseY =  (e.pageY - offset.top - areaBox );			
    $('#layoutSpace').append('<div class="dbox" style="left:'+ mouseX +'px;top:'+ mouseY  +'px;"></div>');
});