1

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

我的第一个想法是尝试将其转换为带有 colspan 和 rowspan 属性的表格和玩具，但这会弄乱我的可排序功能。

如果有人能指出我正确的方向，我将不胜感激。基本上我可能会重新排序单元格，然后选择两个或多个单元格并在有意义的情况下合并它们！

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

<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，以防万一：）

4

0 回答 0