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

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 数据属性，它保留节点的内部信息（我会将其添加到自述文件）：

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

您收到的额外项目是 dragging/resizing 视图的占位符。在您开始 drag/resize.

之前，它一直处于隐藏状态

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

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

jQuery Gridstack plugin - Get elements attributes, fix resize handle and lock items when others move

css

jquery

jquery-ui