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

问题描述

我是第一次使用gridstack。

我想做这样的事情:

enter image description here

以此为例,例如我希望“ 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
    }

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

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

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)