不触发布局的Packery init
Packery init without triggering layout
我有 packery jQuery 可拖动所有设置并在我的开发环境中正常工作。
目前我正在将我订购的(包装)html保存到数据库中。在将所有内容插入数据库之前,我更改了 dom 元素的顺序以匹配打包顺序。一切正常
使用已保存的 html 重新加载页面时,所有 div 都会按照保存的位置显示。
我遇到的问题是,当我使用加载的 HTML 再次设置 packery($grid 是父级 div)
var $grid = $('.grid');
$grid.packery({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
stamp: ".stamp",
gutter:0,
percentPosition: true
});
Packery 再次 "packs" 一切。这正是它应该做的。事情是我想保留我的旧布局,其中可能有空 space。
我的问题是...
是否可以在不触发布局功能的情况下初始化Packery?我尝试将 initLayout: false
添加到选项中。但它不允许我拖动元素 & layoutInstant: false
似乎什么也没做。
已保存的屏幕 html(按我想要的方式拖动所有内容后),然后重新加载,然后 $grid.packery()
https://i.stack.imgur.com/fS2Vp.png
https://i.stack.imgur.com/pAnkW.png
好的,我自己设法解决了这个问题。主要来自 metafizzy git metafizzy isse tracker
上的这个答案
在初始 packery 设置之前添加了代码
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();
};
设置 packery 时。设置 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');
我有 packery jQuery 可拖动所有设置并在我的开发环境中正常工作。
目前我正在将我订购的(包装)html保存到数据库中。在将所有内容插入数据库之前,我更改了 dom 元素的顺序以匹配打包顺序。一切正常
使用已保存的 html 重新加载页面时,所有 div 都会按照保存的位置显示。
我遇到的问题是,当我使用加载的 HTML 再次设置 packery($grid 是父级 div)
var $grid = $('.grid');
$grid.packery({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
stamp: ".stamp",
gutter:0,
percentPosition: true
});
Packery 再次 "packs" 一切。这正是它应该做的。事情是我想保留我的旧布局,其中可能有空 space。
我的问题是...
是否可以在不触发布局功能的情况下初始化Packery?我尝试将 initLayout: false
添加到选项中。但它不允许我拖动元素 & layoutInstant: false
似乎什么也没做。
已保存的屏幕 html(按我想要的方式拖动所有内容后),然后重新加载,然后 $grid.packery()
https://i.stack.imgur.com/fS2Vp.png
https://i.stack.imgur.com/pAnkW.png
好的,我自己设法解决了这个问题。主要来自 metafizzy git metafizzy isse tracker
上的这个答案在初始 packery 设置之前添加了代码
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();
};
设置 packery 时。设置 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');