Packery 在将项目垂直拖放到可排序网格中时，垂直对齐中断

Posted 2023-05-08

【中文标题】Packery 在将项目垂直拖放到可排序网格中时，垂直对齐中断

【英文标题】：Packery when drag then drop an item vertically in a sortable grid, vertical alignment breaks

【发布时间】：2014-10-01 06:42:09

【问题描述】：

我在尝试使用 packery 和 draggabilly 创建可排序的项目网格时遇到问题。

我也尝试过 jquery ui dragabble，但问题仍然存在。当我拖放项目时，可能会破坏垂直对齐方式，因此项目“捕捉”到行的一部分。这也会破坏项目的顺序。

http://jsfiddle.net/foobass/sasrx654/

如果您水平拖动一个项目，它会卡入到位并很好地对齐。如果您垂直拖动，您可能会失去对齐，它不会正确卡入到位。最后一项的位置也发生了变化。

谁能建议我做错了什么？

   var container = document.querySelector('#container');

   var packery = new Packery(container, 
        rowHeight: '.module-sizer',
        itemSelector: '.module',
        columnWidth: '.module-sizer',
        isInitLayout: true,
        isResizeBound: true
   );

似乎由于某种原因，被丢弃项目的“顶部”css 值和下面的项目被动态设置为不正确的值。

【问题讨论】：

你找到解决办法了吗？

也有兴趣找到解决方案。我和你一起解决这个问题。

【参考方案1】：

我知道已经晚了，但我自己正在寻找这个问题，所以也许有人需要这个。

Packery 的布局系统无法按照我们需要 Packery 在垂直拖动时的行为方式工作，因此我们需要一种解决方法。我已经设法解决了垂直对齐问题，以重新布局“dragItemPositioned”上的包装，就像这样；

packery.on( 'dragItemPositioned', function( event, draggedItem ) 
    app.tiles.settings.packeryEl.packery();
);