无法水平移动小部件允许水平交换而不创建新行

如何解决无法水平移动小部件允许水平交换而不创建新行

我是第一次使用gridstack。

我想做这样的事情：

以此为例，例如我希望“ Grid-1”可以替换为“ Grid-2”，“ Grid-3”，“ Grid-4”或“ Grid-5”，假设可以移动grid1移至网格5的位置，网格5可以移至网格1的位置，或者只是它们可以水平移动。

此外，一行中的所有网格项都具有相同的大小。

目前我已经做了类似的事情

<div class="grid-stack no margin top" data-gs-width="12">
    <div data-id="grid1" class="grid-stack-item" data-gs-no-resize="true" data-gs-x="0" 
          data-gs-y="0" data-gs-width="2" data-gs-height="2">
                        <div class="grid-stack-item-content">
                            {{!--  <img src="images/Grid-1"/> --}}
                          </div>
     </div>
     <div data-id="grid2" class="grid-stack-item" data-gs-no-resize="true" data-gs-x="2" 
          data-gs-y="0" data-gs-width="2" data-gs-height="2">
                        <div class="grid-stack-item-content">
                            {{!--  <img src="images/Grid-2"/> --}}
                          </div>
     </div>
 </div>

我为此网格堆栈设置的选项是：

var options = {
      float: true,resizable: {
          handles: "s"
      },draggable: {scroll: true},cellHeight:20,verticalMargin:0,width: 12
    }

通过这样做，我可以移动单个网格元素，但是它们不能逐行移动。 （即在单行中将一个网格替换为另一个网格）。

有人可以帮忙吗？ 预先感谢。