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());

            }

        });

    }

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