合并网格表示中的两个div

我有一个4×4网格，我已经通过jquery UI使其可以排序和可选择。 我想做的下一件事是能够合并我选择的两个div，但我完全不知道要去做这件事。

我的第一个想法是试图将它转换为一个表和玩具周围的colspan和rowspan属性，但这将搞乱我的可排序function。

如果有人能指出我正确的方向，我将非常感激。 基本上我可能会重新排序细胞，然后选择两个或更多细胞并合并它们，如果这是有道理的！

我有一个JSFiddle，我到目前为止在这里

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
 $(function() { $( "#selectable" ) .sortable({ handle: ".handle" }) .selectable() .find( "li" ) .addClass( "ui-corner-all" ) .prepend( "
" ); }); $(function() { $( "#selectable" ).selectable({ stop: function() { var result = $( "#select-result" ).empty(); $( ".ui-selected", this ).each(function() { var index = $( "#selectable li" ).index( this ); result.append(" #"+ ( index + 1 ) ); }); } }); }); 

提前致谢！！

编辑

只是为了澄清，我不介意，如果在这个阶段，合并后创建一个空白div，以防更容易:)