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;
    position: absolute;
    top:0;
    left:0;
}

div#page {
	width:500px;
	height:300px;
	background-color:#3a8;
    border:3px solid black;
	position:absolute;  
  z-index:777;
  position:absolute;
  top:150;
  left:0;
}

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

JavaScript

$(document).ready(function(){
       	$('#orangeBox').draggable({opacity:'0.5', helper:'clone'});	  
        $('#page').droppable({accept:'#orangeBox'});
});