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

55
4

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

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

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

Проблема, с которой я столкнулась, - это когда я снова настроил упаковку с моим загруженным 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.png
https://i.stack.imgur.com/pAnkW.png

спросил(а) 2018-05-11T11:46:00+03:00 2 года, 2 месяца назад
1
Решение
55

Хорошо, мне это удалось разобраться. в основном из этого ответа на метафизмы 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();
};

При настройке упаковки. set initLayout:false например

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

Затем настройка всех элементов (индекс данных) - это уникальное значение, добавляемое к каждому div, которое можно перемещать. вы можете использовать 'id'

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

ответил(а) 2018-05-12T06:58:00+03:00 2 года, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема