JQuery UI. Клонирование объекта и помещение туда, где находится курсор?

Собственно имеется такой код. При клонировании объекта, объект помещается не в том месте где находится курсор, а в начале блока. Помогите пожалуйста исправить))

JS код

var ID=55;
			var type;
			var val;
			var StartWidth=200;
			var StartHeight=200;
			$('.item').draggable(
			{
				grid:[10,10],
				scroll:false,
				containment: "body",
				stack: ".item",
				helper: function() 
				{
					type=this.id;
					return $(this).clone();
					
				},
			});
			$('#workspace').droppable(
			{
				accept: '.item',
				
				drop: function(event, ui) 
				{
					if (!ui.draggable.hasClass("dropped"))
					{
						$(this).append($(ui.draggable)
							.clone()
							.attr("id","f"+ID+"")
							.addClass("dropped")
							.css({"height":StartWidth,"width":StartHeight,"position":"absolute"})
							.draggable(
							{
								containment: this,
								stack:".dropped",
								grid:[10,10],
							})
							.empty()
						);
						$("#f"+ID+"_svg").removeAttr("viewBox");
						$("#f"+ID+"_svg")[0].setAttribute("viewBox","24 -1 95 145");
						$('.dropped').resizable(
						{
							create:function(event,ui)
							{
								$("#"+this.id+"_svg").css({"height":StartHeight,"width":StartWidth});
							},
							resize: function(event, ui)
							{
								$('#'+this.id+'_svg').css({"height":""+ui.size.height+"px","width":""+ui.size.width+"px"});
							},
							containment:'#workspace',
							grid:[50,50],
							maxHeight:500,
							maxWidth: 500,
							minHeight: 75,
							minWidth: 100
						});
						ID=ID+1;
					}
				}
			});

HTML

<html>
	<head>
		<link rel="stylesheet" href="Scripts/jquery_ui/jquery-ui.css">
		<script src="Scripts/mscorlib.js" type="text/javascript"></script>
		<script src="Scripts/PerfectWidgets.js" type="text/javascript"></script>
		<script src="Scripts/jquery_ui/external/jquery/jquery.js"></script>
		<script src="Scripts/jquery-ui.js"></script>
		<style>
			.box
			{
				display: inline-block;
			}
			#content
			{
				border: 1px solid black;
				width: 13%;
				height: 100%;
			}
			#workspace
			{
				float: right;
				border: 1px solid black;
				width: 86%;
				height: 100%;
				
			}
			.item
			{
				border: 1px solid black;
				width: 50px;
				height: 50px;
				margin: 10px;
				text-align: center;
				
			}
			.root
			{	
				border: 1px solid black;
				width: 50px;
				height: 50px;
				text-align: center;
			}
			.dropped
			{
				margin: 0px;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="box" id="content">
			Объекты
				<div id="1" class="item">
					<img src="1.png"/>
				</div>
				<div id="2" class="item">
				</div>
			</div>
			<div class="box" id="workspace"></div>
		</div>
	</body>
</html>