Question

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

我的第一个想法是尝试将其转换为表格并使用colspan和rowspan属性玩具，但这会弄乱我的可排序函数。

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

我有一个JSFiddle，我到目前为止here

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

提前感谢!!

修改

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

以网格表示合并两个div

0 个答案: