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