test1

HTML

<div id="widget_area"> 
        <div id="orangeBox" class="widget"> </div>
    </div>
    <div id="page">
    </div>

CSS

body {
	background-color:#CCC;
}
div#wrapper {
	width:500px;
	position:absolute; 
	alignment:center;
}
div#widget_area {
	width:500px;
	height:150px;
    border:3px solid red;
}

div#page {
	width:500px;
	height:300px;
	background-color:#3a8;
    border:3px solid black;
	position:relative;    
    z-index: 1; 
}

.widget {
  width:98px;
   height:98px;
   background-color:orange;
   border:1px solid black;
    cursor:pointer;
    z-index: 3; 
}

JavaScript

$(document).ready(function(){
       	$('#orangeBox').draggable({
            opacity:'0.5', 
            helper:'clone',
            revert : 'invalid'
        });	  
        $('#page').droppable({
            accept:'#orangeBox',
            drop: function( event, ui ) {
                $(this).after($(ui.helper).clone());
            }
        });
});