标签: gridster

是否有任何方法可以使Gridster.js瓷砖粘贴,即不垂直向上移动以填充空白区域.有点像打开按钮到网格的布局程序的工作方式...

我正在使用以下内容：https : //github.com/tiberiuzuld/angular-gridster2

我希望能够在同一页面 grid1 和 grid2 上实例化两个具有不同“id”的网格。是否可以从 grid1 拖动一个框并将其放入 grid2？

如果是这样，如何？如果没有，是否还有其他类似的 angular2/4 库支持这个？

如何将网格从一个网格拖到另一个网格？

$(function () { //DOM Ready

    $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [160, 160]
    });

    var gridster = $(".gridster ul").gridster().data('gridster');
    $( ".draggable" ).draggable();
    $( ".gridster " ).droppable({
        drop: function( event, ui ) {
            $( ".draggable" ).removeAttr("style");
            gridster.add_widget('<li class="new"></li>', 1, 1);                 
        }
    });                         
});

我正试图找到一种方法来自动调整gridster容器的大小.

以某种方式,当用户更改浏览器大小时,相应的gridster小部件会调整大小.(其中列数和行数不会改变,但实际大小会改变)

随着浏览器大小的变化,我可以计算"widget_base_dimensions"的值,

但是我找不到更新/执行小部件以应对新大小的方法.

我正在寻找是否有支持这种功能的功能,我注意到了

在jquery.gridster.js的第3529行,

/**
* Recalculates the offsets for the faux grid. You need to use it when
* the browser is resized.
*
* @method recalculate_faux_grid
* @return {Object} Returns the instance of the Gridster class.
*/
fn.recalculate_faux_grid = function() {
    var aw = this.$wrapper.width();
    this.baseX = ($(window).width() - aw) / 2;
    this.baseY = this.$wrapper.offset().top;

    $.each(this.faux_grid, $.proxy(function(i, coords) {
        this.faux_grid[i] = coords.update({
            left: this.baseX + (coords.data.col -1) * this.min_widget_width,
            top: this.baseY + (coords.data.row -1) * this.min_widget_height …

我正在使用Gridster的'add_widget'方法添加网格.窗口小部件已成功添加,但无序列表(ul)宽度小于其内容.

任何人都可以告诉我如何根据内容调整Gridster中的高度和宽度.

我正在使用angularjs 1.5.8并尝试实现像这样的角度网格布局

并且在移动模式中,元素堆叠在彼此之下.我的网格选项如下

 this.standardItems = [
        { sizeX: 2, sizeY: 1, row: 0, col: 0 },  
        { sizeX: 2, sizeY: 1, row: 1, col: 0 },
        { sizeX: 4, sizeY: 2, row: 0, col: 2 },
        { sizeX: 2, sizeY: 1, row: 2, col: 0 },
        { sizeX: 2, sizeY: 1, row: 2, col: 2 },
        { sizeX: 2, sizeY: 1, row: 2, col: 4 },
    ];

    $scope.gridsterOpts2 = {
        margins: [20, 20],
        outerMargin: false,
        swapping: false,
        pushing: false,
        rowHeight: …

我在gridster中遇到c3图表大小调整问题.任何人都可以帮助我如何使图表根据他们所在的格栅盒正确自动调整大小？请找到Plunker

我在选项中给出了尺寸:

 size: {
        height: 100,
        width: 100
    }

如果我删除此大小属性,图表将开箱即用.但它们在格子盒中太小了.如何使这些图表自动占据它们所在的格栅盒的整个高度和宽度？

我有这个数组：

this.dashboard = [
     {name: '<app-incassi-provvigioni></app-incassi-provvigioni>'},
     {name: '<app-scheda-punti-vendita></app-scheda-punti-vendita>'}
]

我在 ngOnInit 循环中填充这个数组。我想知道当我在 html 中读取数组时如何呈现组件：

<gridster [options]="gridsterOptions">
    <gridster-item [item]="item" *ngFor="let item of dashboard">
        <!-- your content here -->
        {{item.name}}
    </gridster-item>
</gridster>

当然，现在它返回对象中包含的字符串，但我正在尝试找到渲染组件的解决方案。有可能这样做吗？

更多细节：我正在开发一个仪表板类型的应用程序，我从数据库中检索用户仪表板的列表，一旦主应用程序组件准备就绪，我就会尝试动态呈现这些组件。使用 Angular 7 和 Gridster2。

有谁知道是否有可能将可拖动的元素放入gridster？ http://gridster.net/#documentation

这对我的目的来说似乎很棒,但是你可以通过删除它们将它们添加到网格中吗？

我想将图像拖到gridster中.有可能吗？我可以看到这个样本吗？

如果这是不可能的,你知道任何替代方案吗？

我需要将图像拖动到div内的离散位置,并能够保存位置以及在画布内移动图像.

我实际上使用gridster来拖动一些物品.

我的容器比我的窗口大,所以,我像往常一样在右侧有一个滚动条.现在,如果我想将项目从顶部拖动到底部,我需要单击它并同时滚动鼠标.

正如你可以在这个小提琴上看到的那样,如果你拿走了这个项目而你开始滚动,那么该项目会保持在他的第一个位置,你需要移动鼠标才能将它带到它上面.

即使滚动,有一种方法可以将项目保留在鼠标下吗？

示例HTML代码:

<div class="container">
  <div class="gridster">
    <ul>
       <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
       <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
       <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
       <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
       <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
       <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
       <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
       <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
       <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
       <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
    </ul>
  </div>
</div>

示例css代码:

.container{
    height:1600px;
}

示例jQuery代码:

 var gridster;

  $(function(){
    gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55], …