Gridstack js 嵌套无法正常工作

如何解决Gridstack js 嵌套无法正常工作

嗨，我正在尝试在此插件中进行多级嵌套。我无法找到任何解决方案。我尝试使用 https://gridstackjs.com/demo/nested.html 并对其进行了一些修改，但看起来多级嵌套无法正常工作（我无法在子父级和父级之间移动项目）

我创建了这个 codepen 来显示这个问题..我无法将嵌套的子项拖到当前父项之外并附加到主要的可放置区域。我试过将 acceptWidgets: '.grid-stack-item' 放在父初始化中，但在将项目从嵌套网格移动到主父时，占位符位置显示离光标很远。 https://codepen.io/aubrijesh/pen/VwbwEbZ

代码也是这样

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Responsive grid demo</title>
    <link rel="stylesheet" href="https://gridstackjs.com/node_modules/gridstack/dist/gridstack.min.css" />
    <style type="text/css">
    body {
        margin: 8px 0;
    }


       .grid-stack>.grid-stack-item>.grid-stack-item-content {
  inset: 1px !important;
}
.btn-primary {
  color: #fff;
  background-color: #007bff;
}

.btn {
  display: inline-block;
  padding: .375rem .75rem;
  line-height: 1.5;
  border-radius: .25rem;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: .5rem;
}

.grid-stack {
  background: #FAFAD2;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

    /* make grid take entire vw so we have correct square cells */
    </style>
</head>

<body>
    <div>
        <h1>Responsive grid demo</h1>
        <div>
            <span>Number of Columns:</span> <span id="column-text"></span>
        </div>
        <div>
            <label>Choose re-layout:</label>
            <select onchange="layout = this.value">
                <option value="moveScale">move + scale</option>
                <option value="move">move</option>
                <option value="scale">scale</option>
                <option value="none">none</option>
            </select>
            <a onClick="grid.removeAll()" class="btn btn-primary" href="#">Clear</a>
            <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
          <a onClick="addnested()" class="btn btn-primary" href="#">Add nested</a>
          
          
        </div>
        <br />
        <div class="grid-stack">
        </div>
    </div>
    <script src="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-h5.js"></script>
   
    <script type="text/javascript">
      var gridItems = [];
      let sub1 = [ {x:0,y:0},{x:1,{x:2,{x:3,{x:0,y:1},y:1}];
    let count = 0;
    sub1.forEach(d => d.content = String(count++));
      
      let subOptions = {
      // cellHeight: 30,// column: 4,// make sure to include gridstack-extra.min.css
      // itemClass: 'sub',// style sub items differently and use to prevent dragging in/out
      acceptWidgets: '.grid-stack-item',// only pink sub items can be inserted,otherwise grid-items causes all sort of issues
      minWidth: 300,// min to go 1 column mode
      margin: 1
    };
      
    var grid = GridStack.init({
        resizable: {
          handles: 'e,se,s,sw,w,nw,n,ne'
        },column: 24,// cellHeight: 100,// start square but will set to % of window width later
        animate: true,// show immediate (animate: true is nice for user dragging though)
        disableOneColumnMode: true,// will manually do 1 column
        float: true,// acceptWidgets: '.grid-stack-item'
    });
    let text = document.querySelector('#column-text');
    let layout = 'moveScale';

   

    function addWidget() {
        grid.addWidget({ x: 0,y: 0,w: 4,content: '4x1' });
    };
    function addnested() {
      grid.addWidget({x:0,y:0,w:3,h:3,content:"nested add",subGrid: {children: sub1,dragOut: true,class: 'nested1',...subOptions}});
    }

    
    let items = [ // our initial 12 column layout loaded first so we can compare
          {x: 0,w: 2,content: '0'},{x: 2,h: 2,content: '1'},{x: 5,content: '2'},{x: 1,y: 3,content: '3'},y: 2,content: '4'},{x: 0,y: 4,w: 12,content: '5'}
        ]; 
    grid.load(items);
    </script>
</body>

</html>

您可以尝试添加嵌套嵌套网格并尝试在嵌套父项和主父项之间移动项目。我正在尝试创建一个多级嵌套结构。