jQuery Gridstack插件 - 获取元素属性，修复调整大小手柄和锁定项目时，其他人移动 [英] jQuery Gridstack plugin - Get elements attributes, fix resize handle and lock items when others move

问题描述

我尝试向gridstack（动态）添加窗口小部件，但面临一些问题：

I'm trying to add widgets to a gridstack (dynamically), but facing some problems:

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

1. I need to get all items ids, position X, position Y, width and height in order to store the grid widgets position. I managed to do it (maybe not the better way), but I'm always getting one more item than expected. This unexpected item has all attributes undefined. How can I get the correct list of widgets and their attributes?

$('#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);
});

添加小部件时，将其移动到页面的中间或底部添加另一个窗口小部件，第一个移动到顶部。我如何防止这种情况？

When I add a widget, move it to the middle or bottom of the page, then add another widget, the first one moves to the top. How can I prevent that?

调整大小手柄是错误的方式和切割。如何解决？

The resize handle is the wrong way around and cut. How can I fix it?

Fiddle here

非常感谢

推荐答案

1. 您可以使用节点的 _gridstack_node 数据属性，它保留节点的内部信息README）：

1. You can use _gridstack_node data attribute of the node, it keeps internal info for the node (I will add this to README):

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

您收到的额外项目是用于拖动/调整视图大小的占位符。

The extra item you receive is placeholder for dragging/resizing view. It's hidden until you start to drag/resize.

1. 如果您要添加一堆窗口小部件你需要先对它们进行排序。请参阅示例 https://github.com/troolee/gridstack.js ＃load-grid-from-array

您是否包含Font Awesome？

Do you include Font Awesome?

这篇关于jQuery Gridstack插件 - 获取元素属性，修复调整大小手柄和锁定项目时，其他人移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！