javascript - Muuri 多重网格数据

Question

如何在我的函数 updateIndices 中为每个列项绘制数据 ID，类似于 updateColumnIndices？

我想让我的网格更加动态。我只使用 javascript 和 Muuri lib 进行拖放。

谢谢你的帮助。Muuri 是一个 JavaScript 布局引擎，它允许您构建各种布局并使它们具有响应性、可排序、可过滤、可拖动和/或动画。与现有的相比，Muuri 是 Packery、Masonry、Isotope 和 Sortable 的组合。想看看它的实际效果吗？查看网站上的演示。我在剧透下执行此任务的代码

  function setupItemContainer() {
    let itemContentContainer = document.querySelectorAll('.board-column-content');
    for(let i = 0; i < itemContentContainer.length; i++)
    {
      if(!itemContentContainer[i].classList.contains('muuri'))
      {
        itemContainers.push(itemContentContainer[i]);
          muuriItems = new Muuri(itemContentContainer[i], {
            itemDraggingClass: 'muuri-item-default-dragging',
            dragSortHeuristics: {
              sortInterval: 10,
              minDragDistance: 5,
              minBounceBackAngle: Math.PI / 2
            },
            dragPlaceholder: {
              enabled: true,
              duration: 100,
              easing: 'ease',
              createElement: null,
              onCreate: null,
              onRemove: null
            },
            items: '.board-item',
            layoutDuration: 400,
            layoutEasing: 'ease',
            dragEnabled: true,
            dragSort: function () {
              return columnGrids;
            },
            dragSortInterval: 0,
            dragContainer: document.body,
            dragReleaseDuration: 400,
            dragReleaseEasing: 'ease',

            itemPlaceholderClass: 'muuri-item-placeholder'
          })
            .on('dragStart', function (item) {
              item.getElement().style.width = item.getWidth() + 'px';
              item.getElement().style.height = item.getHeight() + 'px';
            })
            .on('dragReleaseEnd', function (item) {
              item.getElement().style.width = '';
              item.getElement().style.height = '';
              columnGrids.forEach(function (muuriItems) {
                muuriItems.refreshItems();
              });
            })
            .on('layoutStart', function () {
              muuriColumns.refreshItems().layout();
            })
            .on('move', updateIndices)
            .on('sort', updateIndices);
          columnGrids.push(muuriItems);
      }
    }
  }
  function setupColumnsContainer() {
    muuriColumns = new Muuri(gridElement, {
      itemDraggingClass: 'muuri-item-column-dragging',
      layoutDuration: 400,
      layoutEasing: 'ease',
      dragEnabled: true,
      dragSortInterval: 0,
      dragStartPredicate: {
        handle: '.board-column-header'
      },
      dragReleaseDuration: 400,
      dragReleaseEasing: 'ease',

    })
      .on('move', updateColumnIndices)
      .on('sort', updateColumnIndices);
  }
    function updateColumnIndices() {
    muuriColumns.getItems().forEach(function (item, i) {
      item.getElement().setAttribute('data-id', i);
    });
  }
  function updateIndices() {
    muuriItems.getItems().forEach(function (item, i) {
      item.getElement().setAttribute('data-id', i);
    });
  }

标签： javascriptdrag-and-drop