Drag n drop in jquery

default.css

/* COLOR BACKGROUND */

		blockquote{
			background-color: #F7F7F7;
		}

		.layout-1{
			background-color: #fff;
		}

		.layout-2{
			background-color: #EDEDED;
		}

		.layout-3{
			background-color: #BFBFBF;
		}

		.layout-4{
			background-color: #FCFBF7;
		}

		.layout-5, .layout-6{
			background-color: #EDEDED;
		}

		.layout-5 ul .select, .layout-6 ul .select{
			background-color: #EDEDED;
		}

		.layout-5 ul li, .layout-6 ul li{
			background-color: #F7f7f7;
		}

		.layout-5 ul li a, .layout-6 ul li a{
			color: #383838;
			text-decoration: none;
		}

		.layout-5 ul li:hover, .layout-6 ul li:hover{
			background-color: #EDEDED;
		}

		.menu-1 ul li, .menu-2 ul li{
			background-color: #EDEDED;
		}

		.menu-1 ul li:hover, .menu-2 ul li:hover {
			background-color: #DDDDDD;
		}

		.menu-1 ul li:hover a, .menu-2 ul li:hover a{
			color: #333333;
		}

		.menu-1 ul li a, .menu-1-clean ul li a, .menu-2 ul li a, .menu-2-clean ul li a{
			color: #7A7A7A;
		}

		.menu-1-clean ul li a:hover, .menu-2-clean ul li a:hover{
			color: #333333;
			text-decoration: underline;
		}

		.form-text, .form-text-half, .form-text-lower{
			background-color: #F4F4F4;
		}

		.form-text-2, .form-text-half-2, .form-text-lower-2{
			background-color: #fff;
		}

		.form-dropmenu option{
			background-color: #fff;
		}

		.form-dropmenu option:hover{
			background-color: #EDEDED;
		}

		.form-submit, .form-buttom{
			background-color: #F4F4F4;
		}

		.form-submit:hover, .form-buttom:hover{
			background-color: #EDEDED;
		}

		.form-button-menu button{
			background-color: #F4F4F4;
		}

		.form-button-menu button:focus{
			background-color: #E2E2E2;
		}

		.form-button-menu button:hover{
			background-color: #E2E2E2;
		}

		.slideshow{
			background-color: #F4F4F4;
		}

		.slideshow .prev a, .slideshow .next a{
			color: #686868;
		}

		.slideshow label{
			background-color: #EAEAEA;
		}

		/* WIDTH HEIGHT PADDING MARGIN BORDER */
		p{
			width: 300px;
		}

		blockquote{
			padding: 10px;
			font-size: 13px;
			width: 300px;
			margin-left: 20px;
			margin-right: 20px;
		}

		table{

		}

		table tr{
			border: 1px #BFBFBF solid;

		}

		table td{
			padding: 5px;
		}

		table th{
			border: 1px #BFBFBF solid;
			padding: 5px;
		}

		.layout-4{
			border: 1px #EDEBE6 solid;
		}

		.layout-5, .layout-6{
			width: 600px;
			height: 200px;
		}

		.layout-5 ul{
			width: 100px;
		}
		.layout-5 ul li, .layout-6 ul li{
			width: 100px;
			text-align: center;
			padding: 12px 0px 12px 0px;
		}

		.layout-6 ul li{
			float: left;
		}

		.layout-7{
			border: 1px #EDEDED solid;
		}

		.layout-1, .layout-2, .layout-3, .layout-4, .layout-7{
			width: 300px;
			height: 150px;
		}

		.menu-1, .menu-2, .menu-1-clean, .menu-2-clean{
			width: auto;
			height: auto;
		}

		.menu-1 ul li, .menu-1-clean ul li{
			float: left;
			text-align: center;
			padding: 16px 30px 16px 30px;
		}

		.menu-2 ul li, .menu-2-clean ul li{
			padding: 20px 90px 20px 40px;
		}

		.menu-1 ul li a, .menu-1-clean ul li a, .menu-2 ul li a, .menu-2-clean ul li a{
			text-decoration: none;
		}

		.form-text, .form-text-2{
			padding: 10px 20px 10px 20px;
			
		}

		.form-text-half, .form-text-half-2{
			width: 140px;
			padding: 10px 10px 10px 10px;
		}

		.form-text-lower, .form-text-lower-2{
			width: 50px;
			padding: 10px 10px 10px 10px;
		}

		.form-text, .form-text-2, .form-text-half, .form-text-half-2, .form-text-lower, .form-text-lower-2{
			font-size: 14px;
			text-transform: uppercase;
			border: 0px solid;
		}

		.form-textarea{
			width: 400px;
			height: 100px;
			padding: 10px;
			border: 0px solid;
		}

		.form-dropmenu{
			padding: 3px 15px 3px 15px;
		}

		.form-dropmenu option{
			padding: 3px 15px 3px 15px;
		}

		.form-dropmenu-2 option{
			padding: 5px 20px 5px 20px;
		}

		.form-submit, .form-buttom{
			border: 1px #EDEDED solid;
			padding: 8px 14px 8px 14px;
			text-transform: uppercase;
			font-size: 11px;
		}

		.form-button-menu button{
			float: left;
			padding: 0px;
			margin: 0px;
			border: 0px;
			padding: 10px 20px 10px 20px;
			border-top: 1px #E2E2E2 solid;
			border-right: 1px #E2E2E2 solid;
			border-bottom: 1px #E2E2E2 solid;
		}

		.form-button-menu button:first-child{
			border-left: 1px #E2E2E2 solid;
		}

		.slideshow{
			width: 900px;
			height: 280px;
		}

		.slideshow .prev{
			position: absolute;	
			margin-top: 110px;
		}

		.slideshow .next a{
			position: absolute;
			margin-left: 840px;
			margin-top: 110px;
		}

		.slideshow .prev a, .slideshow .next a{
			font-size: 50px;
			text-decoration: none;
		}

		.slideshow label{
			position: absolute;
			margin-top: 250px;
			padding: 10px 0px 10px 0px;
			width: 900px;
			text-indent: 50px;
		}

		img.displayed {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}



		/* SHADOW BORDER */
		.layout-1, .layout-2, .layout-3, .layout-5, .layout-6{
			-webkit-box-shadow: #898989 0px 2px 3px 0px ;
			-moz-box-shadow:  	#898989 0px 2px 3px 0px ; /* color, h-offset, v-offset, blur, spread, inset is optional */
			box-shadow: 		#898989 0px 2px 3px 0px ;
		}

		.form-submit, .form-buttom{
			-webkit-box-shadow: #C4C4C4 0px 1px 1px 0px ;
			-moz-box-shadow:  	#C4C4C4 0px 1px 1px 0px ; /* color, h-offset, v-offset, blur, spread, inset is optional */
			box-shadow: 		#C4C4C4 0px 1px 1px 0px ;
		}

		.form-text, .form-text-2, .form-textarea, .form-text-half, .form-text-half-2, .form-text-lower, .form-text-lower-2{
			-webkit-box-shadow: #898989 0px 1px 3px 0px inset;
			-moz-box-shadow:  	#898989 0px 1px 3px 0px inset; /* color, h-offset, v-offset, blur, spread, inset is optional */
			box-shadow: 		#898989 0px 1px 3px 0px inset;
		}

		.form-text, .form-text-2, .form-textarea, .form-text-half, .form-text-half-2, .form-text-lower, .form-text-lower-2, .form-submit, .form-buttom, .slideshow{
			-webkit-border-radius:	2px;
			-moz-border-radius: 	2px;
			border-radius: 			2px;
		}

		.form-button-menu button:first-child, .menu-1 ul li:first-child{
			-webkit-border-radius: 	3px 0px 0px 3px;
			-moz-border-radius: 	3px 0px 0px 3px;
			border-radius: 			3px 0px 0px 3px;
		}

		.form-button-menu button:last-child, .menu-1 ul li:last-child{
			-webkit-border-radius: 	0px 3px 3px 0px;
			-moz-border-radius: 	0px 3px 3px 0px;
			border-radius: 			0px 3px 3px 0px;
		}

editor.html

<html>
<head>
	<meta charset="UTF-8">
	<script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.min.js"></script>
	<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<link rel="stylesheet" href="default.css">
	<style type="text/css">
		@font-face {font-family: 'kalinga';src: url("CALIBRI.TTF");font-weight: normal;font-style: normal;}
		body{
			background-color: #545454;
			font-family: 'kalinga', 'fallback font', serif;
		}
		#editor{
			background-color: #303030;
			position: absolute;
			top:10px;
			left:5px;
			padding: 5px 10px 5px 10px;
		}
		#elements-option{
			background-color: #303030;
			position: absolute;
			top:10px;
			left:600px;
			padding: 5px 10px 5px 10px;
		}

		#editor .box, #elements-option .box{
			float: left;
			margin: 0px 5px 0px 5px;
			padding:  5px;
		}

		#editor .box .buttom, #elements-option .box .buttom{
			float: left;
			margin-left: 5px;
		}

		#editor .box .buttom a, #elements-option .box .buttom a{
			font-size: 12px;
			color: #8E8E8E;
			text-decoration: none;
			display: block;
			padding: 8px 12px 8px 12px;
			border-top: 1px #3D3D3D solid; 
		}

		#editor .box .buttom:hover, #elements-option .box .buttom:hover{
			background-color: #000;
		}

		#editor .box .buttom:hover a, #elements-option .box .buttom:hover a{
			color: #fff;
		}

		#editor .form-text, #elements-option .form-text{
			width: 50px;
			height: 32px;
			background-color: #2D2D2D;
			border: 0px solid;
			padding: 2px;
			color: #fff;
		}

		#display{
			background-color: #fff;
			height: 500px;
			width: 1000px;
			margin-top: 100px;
			margin-left: 400px;
			margin-right: auto;
			/* padding: 10px; */
		}

		#elements{
			height: auto;
			width: 200px;
			position: absolute;
			margin-left: -10px;
			margin-top: 20px;
		}

		#elements .elem{
			height: 100px;
			width: auto;
			border-bottom: 1px #6B6B6B solid;
			border-right: 1px #6B6B6B solid;
		}

		#elements .elem:last-child{
			border-bottom: 0px solid;
		}

		#elements .elem:hover{
			background-color: #5E5E5E;
		}

		#elements .elem p{
			margin-left: 20px;
			margin-top: 40px;
			position: absolute;
			color: #fff;
			width: 100px;

		}

		#display{
			-webkit-box-shadow: #222222  0px 3px 6px 0px ;
			-moz-box-shadow: #222222 	 0px 3px 6px 0px ; /* color, h-offset, v-offset, blur, spread */
			box-shadow: #222222 		 0px 3px 6px 0px ; /* inset is optional */
		}

		#editor, #elements-option{
			/* IE10 Consumer Preview */ 
			background-image: -ms-linear-gradient(bottom, #151515 0%, #252525 100%);

			/* Mozilla Firefox */ 
			background-image: -moz-linear-gradient(bottom, #151515 0%, #252525 100%);

			/* Opera */ 
			background-image: -o-linear-gradient(bottom, #151515 0%, #252525 100%);

			/* Webkit (Safari/Chrome 10) */ 
			background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #151515), color-stop(1, #252525));

			/* Webkit (Chrome 11+) */ 
			background-image: -webkit-linear-gradient(bottom, #151515 0%, #252525 100%);

			/* W3C Markup, IE10 Release Preview */ 
			background-image: linear-gradient(to top, #151515 0%, #252525 100%);

			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;

			-webkit-box-shadow: #222222  0px 2px 3px 0px ;
			-moz-box-shadow: #222222 	 0px 2px 3px 0px ; /* color, h-offset, v-offset, blur, spread */
			box-shadow: #222222 		 0px 2px 3px 0px ; /* inset is optional */
		}

		#editor .box, #elements-option .box{
			-webkit-border-radius:  2px;
			-moz-border-radius: 	2px;
			border-radius: 			2px;
		}

		#editor .box .buttom a, #elements-option .box .buttom a{
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			border-radius: 2px;
			/* IE10 Consumer Preview */ 
			background-image: -ms-linear-gradient(bottom, #202020 0%, #303030 100%);

			/* Mozilla Firefox */ 
			background-image: -moz-linear-gradient(bottom, #202020 0%, #303030 100%);

			/* Opera */ 
			background-image: -o-linear-gradient(bottom, #202020 0%, #303030 100%);

			/* Webkit (Safari/Chrome 10) */ 
			background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #202020), color-stop(1, #303030));

			/* Webkit (Chrome 11+) */ 
			background-image: -webkit-linear-gradient(bottom, #202020 0%, #303030 100%);

			/* W3C Markup, IE10 Release Preview */ 
			background-image: linear-gradient(to top, #202020 0%, #303030 100%);
		}

		#editor .box .buttom a:hover, #elements-option .box .buttom a:hover{
			/* IE10 Consumer Preview */ 
			background-image: -ms-linear-gradient(bottom, #404040 0%, #303030 100%);

			/* Mozilla Firefox */ 
			background-image: -moz-linear-gradient(bottom, #404040 0%, #303030 100%);

			/* Opera */ 
			background-image: -o-linear-gradient(bottom, #404040 0%, #303030 100%);

			/* Webkit (Safari/Chrome 10) */ 
			background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #404040), color-stop(1, #303030));

			/* Webkit (Chrome 11+) */ 
			background-image: -webkit-linear-gradient(bottom, #404040 0%, #303030 100%);

			/* W3C Markup, IE10 Release Preview */ 
			background-image: linear-gradient(to top, #404040 0%, #303030 100%);

			border-top: 1px #333333 solid;
		}
/*
		.layout-1{
			height: 200px;
			width: 300px;
			background-color: #f3f;
		}

		.layout-2{
			height: 80px;
			width: 150px;
			background-color: #E0ACAC;
		}

		.layout-3{
			height: 50px;
			width: 50px;
			background-color: #eee;
		}
*/

	</style>
	<script type="text/javascript">
/*
		function addcircle(){
			var c=document.getElementById("circle-1");
			var ctx=c.getContext("2d");
			ctx.beginPath();
			ctx.arc(45,45,40,0,2*Math.PI);
			ctx.stroke();
		}
*/


		function addLayout(id){
			// class="ui-widget-content"
			var ul = $('<div class="' + id + '">' + id + '<p></p></div>');
			$('#display').append(ul);

			//$('<div class="' + id + '" />').html(id).appendTo('#display');
		}

		$(document).ready(function() {
			var a = 3;
			var lastSelected = '';

			//add circle
			//addcircle();

			// Handler for .ready() called.
			$('.elem').click(function(event) {
				//alert(event.target.id);
				addLayout(event.target.id);
			});

			$('#add-new').click(function() {
				$('#display').html('');
			});

			// ELEMENTS OPTIONS

			$('#change-border').click(function() {
				if (lastSelected) {
					//alert(lastSelected);
					var styleProps = $(lastSelected).css( ["width", "height", "color", "background-color", "border-top-style", "border-left-width"]);
					$.each( styleProps, function( prop, value ) {
						//html.push( prop + ": " + value );
						alert( prop + ": " + value );
					});
				};
			});

			$('#display').hover(function (event) {
				$('#display').on('click', 'div, canvas', function(event) {
					$(this).css('z-index', a++);
					lastSelected = this;
					$(this).resizable();
				});
				$('#display div, #display canvas').hover(function(event) {
						//$(this).not('#display').css('border-width', '0px');
						//$(this).not('#display').css('border-style', 'dashed');
						//zIndex: 999,
						$(this).draggable({ opacity: 0.5, containment: 'parent' });

						$(this).droppable({ helper: 'clone',
							start: function(event, ui) {
								$(ui.helper).addClass('ui-draggable-helper');
								
							},
							drop: function( event, ui ) {

								//alert(ui.draggable);
								//alert(ui.helper.parent().attr('class'));
								
								if (!ui.helper.parent().attr('class')) {
									if(confirm('Merge?')) {
										$(ui.helper).clone().prependTo(this).css( { 'opacity' : '10','position' : 'absolute', 'left': '0px', 'top': '0px' } );
										$(ui.draggable).html(ui.draggable.remove().html());
									}else{
										//Do nothing
									}
								};

							}
						});
				}, function(){
					//$(this).removeAttr("style");
					//$(this).not('#display').css('border-width', '0px');
				});
			});

		});
	</script>
</head>
<body>

<div id="editor">
	<!--
	<div class="box">
		<div class="buttom"><a href="#">OPEN</a></div>
	</div>
	-->
	<div class="box">
		<!--
		<div class="buttom"><input type="text" name="texto" placeholder="103px" class="form-text" /></div>
		<div class="buttom"><input type="text" name="texto" placeholder="102px" class="form-text" /></div>
		-->
		<div class="buttom" id="add-new"><a href="#">NEW</a></div>
	</div>
	<div class="box">
		<div class="buttom"><a href="#">LAYOUT</a></div>
		<div class="buttom"><a href="#">TEXT</a></div>
		<div class="buttom"><a href="#">TABLE</a></div>
		<div class="buttom"><a href="#">FORM</a></div>
		<div class="buttom"><a href="#">CONTENT</a></div>
		<div class="buttom"><a href="#">MENU</a></div>
		<div class="buttom"><a href="#">SLIDE</a></div>
	</div>
</div>
<div id="elements-option">
	<div class="box">
		<div class="buttom"><a href="#">NO-WIDTH</a></div>
		<div class="buttom"><a href="#">NO-HEIGHT</a></div>
	</div>
		<div class="box">
		<div class="buttom"><a href="#">SHADOW</a></div>
		<div class="buttom"><a href="#">NO-SHADOW</a></div>
	</div>
	<div class="box">
		<div class="buttom"><a href="#">BORDER</a></div>
		<div class="buttom" id="change-border"><a href="#">NO-BORDER</a></div>
		<div class="buttom"><a href="#">BORDER-SOLID</a></div>
		<div class="buttom"><a href="#">BORDER-DOT</a></div>
	</div>
</div>

<div id="elements">
	<div class="elem" id="layout-1"><p>LAYOUT 1</p></div>
	<div class="elem" id="layout-2"><p>LAYOUT 2</p></div>
	<div class="elem" id="layout-3"><p>LAYOUT 3</p></div>
	<div class="elem" id="layout-4"><p>LAYOUT 4</p></div>
</div>

<div id="display">
<!--
	<canvas id="circle-1" width="100" height="100" style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.
	</canvas>
-->
</div>

</body>
</html>