Gridstack：将小部件从一个网格拖动到另一个网格，嵌套一个

Posted 2021-04-20

我试图创建此行为，并不确定Gridstack是否支持它。我有3个Gridstack网格：Grid1，Grid2和Grid3。 Grid1是一个独立的网格，Grid3嵌套在Grid2中。我需要能够将Grid1中的小部件拖动到Grid2（外部网格）和Grid3（嵌套网格）中。以下示例我能够在两个顶级网格之间拖动小部件并创建嵌套网格，但不能将这两个网格组合在一起。如果这支持 - 任何指针都表示赞赏。

注意：将代码段扩展为全屏

$(document).ready(function() {
  $('.grid-stack').gridstack();
});

.grid-stack {
  background: lightgoldenrodyellow;
}

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

.grid-stack .grid-stack {
  /*margin: 0 -10px;*/
  background: rgba(255, 255, 255, 0.3);
}

.grid-stack .grid-stack .grid-stack-item-content {
  background: lightpink;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js'></script>


<div class="container-fluid">
  <h1> Multilevel Nested grids demo</h1>
  <div class="grid-stack" id="container-stack">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4">
      <div class="grid-stack-item-content">
        <span>Grid One</span>
        <div class="grid-stack" id="grid-one">
          <div class="grid-stack-item widget" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1">
            <div class="grid-stack-item-content">1</div>
          </div>
          <div class="grid-stack-item widget" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1">
            <div class="grid-stack-item-content">2</div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="8" data-gs-height="4">
      <div class="grid-stack-item-content">
        <span>Grid Two</span>
        <div class="grid-stack" id="grid-two">
          <div class="grid-stack-item widget" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1">
            <div class="grid-stack-item-content">3</div>
          </div>
          <div class="grid-stack-item widget" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1">
            <div class="grid-stack-item-content">4</div>
          </div>
          <div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="6" data-gs-height="3">
            <div class="grid-stack-item-content">
              <span>Grid Three</span>
              <div class="grid-stack" id="grid-three">
                <div class="grid-stack-item widget" data-gs-x="0" data-gs-y="0" data-gs-width="6" data-gs-height="1">
                  <div class="grid-stack-item-content">5</div>
                </div>
                <div class="grid-stack-item widget" data-gs-x="6" data-gs-y="0" data-gs-width="6" data-gs-height="1">
                  <div class="grid-stack-item-content">6</div>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
</div>

答案

以下示例我能够在两个顶级网格之间拖动小部件并创建嵌套网格，但不能将这两个网格组合在一起。如果这支持

悲伤却又是真的，那是不可能的。至少，不是与gridstack。

这种拖动机制背后的关键是由acceptWidgets选项完成的。但这不能处理多级.grid-stack元素。因此，出现错误。

您可以尝试将代码段中添加的脚本修改为以下内容：

$("#container-stack").gridstack({
   acceptWidgets: '.grid-stack-item'
})

但遗憾的是，一旦你开始拖动任何小部件，这将导致错误。但它适用于单级嵌套，这不是你想要的。

该文档也没有说明嵌套级别拖动的任何内容。

但我假设这是不可能的原因是这issue，也this one。

我想这几乎就是你想要的。但任何官员都没有回应。它还有三年的历史。另一个表明该项目正在消亡的缺陷是，当您尝试访问某些文件（例如script）时，会收到安全警告，这会阻止我暂时添加此代码段。

---

因此，如果我是你，我会选择jqueryUI和自定义代码。

---

更新

这是一个类似你所期望的东西的片段，让我知道如果这是正确的，那么我将再次改进这一点，例如添加调整大小，捕捉到兄弟小部件和更多的东西：

再次，以全屏模式检查代码段。

$("#gridThree").draggable({
  snap: '#gridTwo',
  snapMode: 'inner',
  zIndex: 5,
  containment: 'parent'
});

$(".widgetInOne, .widgetInTwo, .widgetInThree").draggable({
  snap: '#gridOne, #gridTwo, #gridThree',
  snapMode: 'inner',
  zIndex: false,
  stack: 'div',
  cursor: 'grab',
  // grid: [ 100, 100 ]
});

$("#gridOne, #gridTwo, #gridThree").droppable({
  accept: '.widgetInOne, .widgetInTwo, .widgetInThree',
  drop: function(event, ui) {
    if ($(event.target).find($(event.toElement)).length == 0) {
      $(event.toElement).css({
        'left': '',
        top: ''
      });
      $(event.target).append($(event.toElement));
    }
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#gridOne {
  background: #cecece;
  width: 40%;
  height: 400px;
  display: inline-block;
  margin-right: 4%;
  vertical-align: top;
}

.widgetInOne,
.widgetInTwo,
.widgetInThree {
  width: 100px;
  height: 100px;
  padding: 0.5em;
}

#gridTwo {
  background: #bfe9f3;
  width: 50%;
  height: 400px;
  display: inline-block;
  margin-left: 4%;
  vertical-align: top;
  position: relative;
}

#gridThree {
  background: #ffdda9;
  width: 300px;
  height: 300px;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  right: 100px;
  top: 0;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<div id="gridOne">
  <div class="ui-widget-content widgetInOne">
    <p>One</p>
  </div>
</div>


<div id="gridTwo">
  <div class="ui-widget-content widgetInTwo">
    <p>Two</p>
  </div>
  <div id="gridThree">
    <div class="ui-widget-content widgetInThree">
      <p>Three</p>
    </div>
  </div>
</div>

另一答案

这是我编写的一个旧的拖放小提琴（一个很久以前！）的代码，其中的区域既可拖动也可放置。可以拉到任一可放置区域的项目可以再次从一个区域拖动到另一个区域并上下拖动。虽然这些项目的大小与您的示例中的大小不同，但它表明只需使用jquery / jquery-ui就可以实现相同的用户体验，而不必坚持使用gridstack。你可以通过在网格外工作来省去一些繁重的工作时间！ ;）

希望这可以帮助

fiddle

$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 70);
$("#dropZone").height($("#launchPad").height());

$(".card").draggable({
  appendTo: "#launchPad",
  cursor: "move",
  helper: 'clone',
  revert: "invalid",

});

$("#launchPad").droppable({
  tolerance: "intersect",
  accept: ".card",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $("#launchPad").append($(ui.draggable));
  }
});

$(".stackDrop1").droppable({
  tolerance: "intersect",
  accept: ".card",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $(this).append($(ui.draggable));
  }
});

$(".stackDrop2").droppable({
  tolerance: "intersect",
  accept: ".card",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $(this).append($(ui.draggable));
  }
});

body {
  margin: 0;
}

#launchPad {
  width: 200px;
  float: left;
  border: 1px solid #eaeaea;
  background-color: #f5f5f5;
}

#dropZone {
  float: right;
  border: 1px solid #eaeaea;
  background-color: #ffffcc;
}

.card {
  width: 150px;
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: #eaeaea;
}

.stack {
  width: 180px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  margin: 20px;
}

.stackHdr {
  background-color: #eaeaea;
  border: 1px solid #fff;
  padding: 5px
}

.stackDrop1,
.stackDrop2 {
  min-height: 100px;
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>




<body>
  <div id="launchPad">
    <div class="card draggable">
      apple
    </div>
    <div class="card draggable">
      orange
    </div>
    <div class="card draggable">
      banana
    </div>
    <div class="card draggable">
      car
    </div>
    <div class="card draggable">
      bus
    </div>
  </div>

  <div id="dropZone">
    <div class="stack">
      <div class="stackHdr">
        Drop here
      </div>
      <div class="stackDrop1 droppable">

      </div>
    </div>

    <div class="stack">
      <div class="stackHdr">
        Or here
      </div>
      <div class="stackDrop2 droppable">

      </div>
    </div>
  </div>

以上是关于Gridstack：将小部件从一个网格拖动到另一个网格，嵌套一个的主要内容，如果未能解决你的问题，请参考以下文章

GridStack 如何禁用移动或拖动网格小部件

Gridstack 动态创建的小部件不拖动

允许 Gridstack 仅可拖动到项目的特定区域

如何将小部件动态添加到网格？

将小部件移动到另一个文件后，Flutter Localization功能无法正常工作？

GridStack - 重新初始化现有网格