Javascript 不触发布局的封隔器初始化

我有packery和jQuery Dragable，可以在我的开发环境中正确设置和工作

目前，我正在将我订购的（打包的）html保存到数据库中。在将所有内容插入DB之前，我更改dom元素的顺序以匹配打包顺序。一切都很顺利

当使用保存的html重新加载页面时，所有div都会按照保存顺序显示在其位置

我遇到的问题是，当我使用（$grid是父div）再次使用加载的HTML设置Packy时

派克又开始“打包”所有东西了。这正是它应该做的。问题是我想保留我的旧布局，它可能有空的空间

我的问题是

是否可以在不触发布局功能的情况下初始化封隔器？我已尝试将

initLayout:false

添加到选项中。但是它不允许我拖拽元素&

layoutInstant:false

似乎什么都不做

已保存html的屏幕（以我希望的方式拖动所有内容后），然后重新加载，然后

$grid.packery（）

---

好吧，我自己解决了这个问题。主要来自metafizzy git上的这个答案

在初始封隔器设置之前添加代码

Packery.prototype.getShiftPositions = function( attrName ) {
    attrName = attrName || 'id';
    var _this = this;
    console.log(_this.packer.width);
    return this.items.map( function( item ) {
        return {
            attr: item.element.getAttribute( attrName ),
            x: item.element.offsetLeft,
            y: item.element.offsetTop
        }
    });
};

Packery.prototype.initShiftLayout = function( positions, attr ) {
    if ( !positions ) {
        // if no initial positions, run packery layout
        this.layout();
        return;
    }
    // parse string to JSON
    if ( typeof positions == 'string' ) {
        try {
            positions = JSON.parse( positions );
        } catch( error ) {
            console.error( 'JSON parse error: ' + error );
            this.layout();
            return;
        }
    }

    attr = attr || 'id'; // default to id attribute
    console.log(this.items);
    this._resetLayout();
    // set item order and horizontal position from saved positions
    this.items = positions.map( function( itemPosition ) {
        var selector = '[' + attr + '="' + itemPosition.attr  + '"]';
        var itemElem = this.element.querySelector( selector );
        var item = this.getItem( itemElem );
        if (item) {
            item.rect.x = itemPosition.x;
            item.rect.y = itemPosition.y;
            return item;
        }
    }, this );

    // filter out any items that no longer exist
    this.items = this.items.filter(function(item) {
        return item !== undefined;
    });
    // add new items
    var newitems = [];
    var p = this;
    $(this.$element[0]).find(this.options.itemSelector).each(function(i, e) {
        if (!p.getItem(e)) {
            newitems.push(e);
        }
    });
    this.addItems(newitems);

    this.shiftLayout();
};

安装封隔器时。设置

initLayout:false

$grid.packery({
    columnWidth: parseInt($columnWidth),
    itemSelector: '.grid-item',
    stamp: ".stamp",
    gutter:0,
    percentPosition: true,
    initLayout: false,
});

然后，设置所有内容（数据项索引）是添加到每个可以移动的div的唯一值。你可以用“身份证”

var initPositions = $grid.packery( 'getShiftPositions', 'data-item-index');
$grid.packery( 'initShiftLayout', initPositions, 'data-item-index');

var initPositions = $grid.packery( 'getShiftPositions', 'data-item-index');
$grid.packery( 'initShiftLayout', initPositions, 'data-item-index');