Пакет инициализации без запуска макета - PullRequest
Новая
       34

Пакет инициализации без запуска макета

0 голосов
/ 11 мая 2018

У меня есть пакет с jQuery Draggable все настройки и работает правильно в моей среде разработки.

В данный момент я сохраняю свой заказанный (пакетный) html в базе данных.Перед тем, как все вставлено в БД, я меняю порядок элементов dom в соответствии с порядком упаковки.Все прекрасно работает

при повторной загрузке страницы с сохраненным html все элементы div отображаются на своих местах в соответствии с сохранением.

Проблема, с которой я сталкиваюсь, - это когда я снова настраиваю упаковку смой загруженный HTML-код ($ grid - родительский div) 

var $grid = $('.grid');
$grid.packery({
      columnWidth: '.grid-sizer',
      itemSelector: '.grid-item',
      stamp: ".stamp",
      gutter:0,
      percentPosition: true
});

Packery выполняет свою функцию, «упаковывая» все заново.это именно то, что он должен делать.Дело в том, что я хочу сохранить мой старый макет, в котором может быть пустое место.

Мой вопрос ...

Возможно ли инициировать упаковку без запуска функции макета?Я попытался добавить initLayout: false к параметрам.но он не позволяет мне перетаскивать элементы & layoutInstant: false, похоже, ничего не делает.

Экраны сохраненного html (после перетаскивания всего, как я хочу), а затем после перезагрузки и затем $grid.packery()

https://i.stack.imgur.com/fS2Vp.pnghttps://i.stack.imgur.com/pAnkW.png

1 Ответ

0 голосов
/ 12 мая 2018

Хорошо, мне удалось разобраться с этим самостоятельно. в основном из этого ответа на метафиззы git metafizzy isse tracker

Добавлен код перед настройкой начальной упаковки 

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,
});

Тогда настройка всего (data-item-index) - это уникальное значение, добавляемое к каждому элементу div, который можно перемещать. Вы могли бы использовать 'ID' 

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