Question

我试图将小部件添加到gridstack（动态），但面临一些问题：

我需要获取所有项目ID，位置X，位置Y，宽度和高度，以便存储网格小部件位置。我设法做到了（也许不是更好的方式），但我总是得到比预期更多的项目。此意外项目的所有属性都未定义。如何获得正确的小部件列表及其属性？

$('#b2').on('click', function() {

  var items = '';

  $('.grid-stack-item').each(function() {
    items += 'id: ' + $(this).attr('id') + ';  ';
    items += 'X: ' + $(this).val($(this).attr('data-gs-x')).attr('data-gs-x') + ';  '
    items += 'Y: ' + $(this).val($(this).attr('data-gs-y')).attr('data-gs-y') + ';  '
    items += 'Width: ' + $(this).val($(this).attr('data-gs-width')).attr('data-gs-width') + ';  '
    items += 'Height: ' + $(this).val($(this).attr('data-gs-height')).attr('data-gs-height') + ';  '
    items += '\n';
  });

  alert(items);
});

当我添加小部件时，将其移动到页面的中间或底部，然后添加另一个小部件，第一个移动到顶部。我该如何防止这种情况？
调整大小手柄是错误的方式和切割。我该如何解决？

Fiddle here

非常感谢

Answer 1

您可以使用节点的_gridstack_node数据属性，它保留节点的内部信息（我将其添加到README中）：

$('.grid-stack-item').each(function () {
    var node = $(this).data('_gridstack_node');
    if (typeof node == 'undefined')
        return;
    console.log(node);
});

您收到的额外项目是占位符，用于拖动/调整视图大小。它一直隐藏，直到你开始拖动/调整大小。

如果你要添加一堆小部件，你需要先对它们进行排序。请参阅示例https://github.com/troolee/gridstack.js#load-grid-from-array
您是否包含Font Awesome？

jQuery Gridstack插件 - 获取元素属性，修复调整大小句柄并在其他人移动时锁定项目

1 个答案: