如何使用jQuery在表格中同时拖拽两个div元素？

我正在使用jQuery，想要在包含9个单元格的表格网格中，将两个div元素当作一个整体同时进行拖拽操作。以下是我的代码：

HTML代码 #

<table border="1" class="mainTable">
  <tr>
    <td id="11">
      <div class="dragDiv" id="1"></div>
    </td>
    <td id="12"><div class="dragDiv" id="2"></div></td>
    <td id="13">&nbsp;</td>
  </tr>
  <tr>
    <td id="21">&nbsp;</td>
    <td id="22">
      &nbsp;
    </td>
    <td id="23">&nbsp;</td>
  </tr>
  <tr>
    <td id="31">&nbsp;</td>
    <td id="32">&nbsp;</td>
    <td id="33">
      &nbsp;
    </td>
  </tr>
</table>

CSS代码 #

.mainTable {
  margin: 20px auto;
  padding: 0px;
}
.mainTable tr td {
  width: 100px;
  height: 100px;
}
.dragDiv {
  text-align: center;
  background-color: #00ABA9;
  height: 50px;
  vertical-align: middle;
  margin: auto;
  position: relative;
  width: 100%;
}

jQuery代码 #

$(function() {
  $(".dragDiv").draggable({
    revert: 'invalid'
  });
  $(".mainTable tr td").droppable({
    accept: function() {
      return $(this).find("*").length == 0;
    },
    drop: function(event, ui) {
      var $this = $(this);
      $this.append(ui.draggable.css({
        /* manually append the element
                and reset positioning */
        top: 0,
        left: 0
      }));
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, 100, "easeOutBack");
        }
      });
    }
  });
});

我尝试过技术社区的多种解决方案，比如实现多个div跨页面拖拽移动、利用jQuery Sortable同时拖拽两个div的方案等。期待您的技术建议。

内容的提问来源于stack exchange，提问作者Bouali Ramzi