如何重置 Packery 实例并重新初始化
How to reset Packery Instance and reinitializing
如何重置包装箱?
如果我使用 packery('destroy')
它会重置结构但是在重新初始化时它会丢失订单实例总是给出相同的索引号....
我厌倦了重新初始化整个元素,但双重绑定让生活变得更加困难。
var $slidesElem = $('ul.ordering-tool-list'),
slidesHeight = $slidesElem.find('li').outerHeight(),
slidesWidth = $slidesElem.find('li').outerWidth();
if(typeof $scope.pckry !=='undefined'){
$scope.initAside.onlyDestroy();
}
//Packery Call
this.initialize =function(execute){
$scope.pckry = $slidesElem.packery({
'itemSelector':".handleMe",
'rowHeight': slidesHeight,
'columnWidth': slidesWidth
});
var itemElems = $scope.pckry.packery('getItemElements');
$scope.initialItem = itemElems;
for ( var i=0, len = itemElems.length; i < len; i++ ) {
// make element draggable with Draggabilly
var draggie = new Draggabilly( itemElems[i],{
axis: 'y',
containment:$slidesElem,
grid: [ 0, 24 ]
});
// bind Draggabilly events to Packery
$scope.pckry.packery('bindDraggabillyEvents', draggie);
}
$scope.pckry.packery('on', 'dragItemPositioned',this.orderItems);
$scope.pckry.packery('on', 'layoutComplete', this.orderItems );
}
//Set the orderof Items
this.orderItems = function() {
var $itemElems = $scope.pckry.packery('getItemElements');
for (var i=0; i< $itemElems.length; i++) {
var indexToPut = $($itemElems[i]).attr("tabindex");
$scope.itemPositioned[i] = indexToPut;
$scope.profileContent[indexToPut].id = i;
$($itemElems[i]).attr('data-module-index', i);
}
$scope.$apply();
};
//reset The Order
this.resetOrder = function(){
var $itemElems = $scope.initialItem;
for (var i=0; i< $itemElems.length; i++) {
$scope.itemPositioned[i] = $($itemElems[i]).attr("tabindex");
$($itemElems[i]).attr('data-module-index', i);
$scope.profileContent[i].id = i;
}
};
//Destroy Event for reset
this.destroy = function(){
//$scope.pckry.packery('destroy');
//$scope.pckry.packery();
//$scope.pckry = null;
//this.initialize(false);
this.resetOrder();
//this.initialize(false);
};
找到解决方案使用 "reload"
$scope.pckry.packery('reloadItems');
如何重置包装箱?
如果我使用 packery('destroy')
它会重置结构但是在重新初始化时它会丢失订单实例总是给出相同的索引号....
我厌倦了重新初始化整个元素,但双重绑定让生活变得更加困难。
var $slidesElem = $('ul.ordering-tool-list'),
slidesHeight = $slidesElem.find('li').outerHeight(),
slidesWidth = $slidesElem.find('li').outerWidth();
if(typeof $scope.pckry !=='undefined'){
$scope.initAside.onlyDestroy();
}
//Packery Call
this.initialize =function(execute){
$scope.pckry = $slidesElem.packery({
'itemSelector':".handleMe",
'rowHeight': slidesHeight,
'columnWidth': slidesWidth
});
var itemElems = $scope.pckry.packery('getItemElements');
$scope.initialItem = itemElems;
for ( var i=0, len = itemElems.length; i < len; i++ ) {
// make element draggable with Draggabilly
var draggie = new Draggabilly( itemElems[i],{
axis: 'y',
containment:$slidesElem,
grid: [ 0, 24 ]
});
// bind Draggabilly events to Packery
$scope.pckry.packery('bindDraggabillyEvents', draggie);
}
$scope.pckry.packery('on', 'dragItemPositioned',this.orderItems);
$scope.pckry.packery('on', 'layoutComplete', this.orderItems );
}
//Set the orderof Items
this.orderItems = function() {
var $itemElems = $scope.pckry.packery('getItemElements');
for (var i=0; i< $itemElems.length; i++) {
var indexToPut = $($itemElems[i]).attr("tabindex");
$scope.itemPositioned[i] = indexToPut;
$scope.profileContent[indexToPut].id = i;
$($itemElems[i]).attr('data-module-index', i);
}
$scope.$apply();
};
//reset The Order
this.resetOrder = function(){
var $itemElems = $scope.initialItem;
for (var i=0; i< $itemElems.length; i++) {
$scope.itemPositioned[i] = $($itemElems[i]).attr("tabindex");
$($itemElems[i]).attr('data-module-index', i);
$scope.profileContent[i].id = i;
}
};
//Destroy Event for reset
this.destroy = function(){
//$scope.pckry.packery('destroy');
//$scope.pckry.packery();
//$scope.pckry = null;
//this.initialize(false);
this.resetOrder();
//this.initialize(false);
};
找到解决方案使用 "reload"
$scope.pckry.packery('reloadItems');