想做一个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());
}
});
}
剩下的后面慢慢完善,先记录下。