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

Question

我正在尝试将小部件添加到 gridstack(动态)，但遇到了一些问题:

1. 我需要获取所有元素 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);
   });
   

2. 当我添加一个小部件时，将它移到页面的中间或底部，然后添加另一个小部件，第一个小部件移到顶部。我怎样才能防止这种情况发生？

3. 调整大小 handle 是错误的方式和剪切。我该如何解决？

Fiddle here

非常感谢

Answer 1

1. 您可以使用节点的 _gridstack_node 数据属性，它保留节点的内部信息(我将把它添加到 README):

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

您收到的额外元素是用于拖动/调整 View 大小的占位符。在您开始拖动/调整大小之前，它一直处于隐藏状态。

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

2. 你包括 Font Awesome 吗？