jquery拖拽实现UI设计组件

想做一个UI设计的组件，左侧是控件列表，右边是编辑区域，左侧的控件可以重复拖拽到右侧然后进行编辑。

效果草图：

部分js代码：

function domop(){
        //set drag and drop		
		$( "#compls .component" ).each(
			function(){$(this).draggable({
			helper:"clone"
			//revert: 'invalid',
			//appendTo:"#rightcolumn"
			});}
		);
		$("#rightcolumn").droppable({
			//accept:"#compls .component",
			drop: function( event, ui ) {        
			  $(this).append($(ui.draggable).clone());
			}
		});
    }

剩下的后面慢慢完善，先记录下。