unire due div in una rappresentazione della griglia

Ho una griglia 4×4 che ho messo attraverso jQuery UI per renderlo variabile e selezionabile. La prossima cosa che vorrei fare è essere in grado di fondere due dei div che ho selezionato, ma non ho assolutamente idea di andare su questo.

I miei primi pensieri sono stati quello di cercare di convertire questo in una table e il giocattolo intorno con attributi di colspan e rowspan, ma questo avrebbe messo in su la mia function sortable.

Se qualcuno mi potesse indicare la giusta direzione, sarei molto grato. Fondamentalmente posso riordinare le cellule ma poi fare una selezione di due o più celle e unirle se questo ha senso!

ho una JSFiddle di quello che ho finora qui

<ol id="selectable"> <li class="ui-state-default" id="1">1</li> <li class="ui-state-default" id="2">2</li> <li class="ui-state-default" id="3">3</li> <li class="ui-state-default" id="4">4</li> <li class="ui-state-default" id="5">5</li> <li class="ui-state-default" id="6">6</li> <li class="ui-state-default" id="7">7</li> <li class="ui-state-default" id="8">8</li> <li class="ui-state-default" id="9">9</li> <li class="ui-state-default" id="10">10</li> <li class="ui-state-default" id="11">11</li> <li class="ui-state-default" id"12">12</li> </ol> $(function() { $( "#selectable" ) .sortable({ handle: ".handle" }) .selectable() .find( "li" ) .addClass( "ui-corner-all" ) .prepend( "<div class='handle'><span class='ui-icon ui-icon-arrow-4'></span></div>" ); }); $(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 ) ); }); } }); }); 

Grazie in anticipo!!

EDIT

Solo per chiarire, non mi preoccupo se in questa fase un div div viene creato dopo la fusione nel caso che sia più facile 🙂