ionic4 ion-reorder-group元件拖拽改變item順序

摘要： 2018在ionic專案中用到的元件有很多，這篇文章講一講ion-reorder-group這個元件的使用。剛開始我都不知道ionic4中已經封裝了拖拽排序的元件，也是主管告訴我的。使用了這個元件的經歷告訴我：仔細讀官方文件，是沒錯的 ！ HTML中使用元件...

2018在ionic專案中用到的元件有很多，這篇文章講一講ion-reorder-group這個元件的使用。剛開始我都不知道ionic4中已經封裝了拖拽排序的元件，也是主管告訴我的。使用了這個元件的經歷告訴我：仔細讀官方文件，是沒錯的 ！

HTML中使用元件，程式碼如下

<!--一個排序組合一個ion-reorder-group-->
 <ion-reorder-group [disabled]="false" (ionItemReorder)="reorder($event)">
<ion-item color="tertiary" *ngFor="let field of fieldList,let i=index">
<ion-label>{{ field.name}}</ion-label>
<!--拖拽按鈕-->
<ion-reorder slot="end"></ion-reorder>
</ion-item>
 </ion-reorder-group>

ionItemReorder繫結reorder事件，是item被拖拽時會被觸發的事件，這個事件是ionic繫結在IonReorderGroup元件上的。記得一定要設定disabled屬性，不然不會有拖拽按鈕出現。

export class HomePage {

fieldList = [{name：1}];

ngOnInit() {
let fields = [{name: "1", type: null, jsonobject: '', level: 0, index: 0, order: true},
{name: "2", type: null, jsonobject: '', level: 1, index: 0, order: true},
{name: "3", type: null, jsonobject: '', level: 1, index: 1, order: true},
{name: "4", type: null, jsonobject: '', level: 2, index: 0, order: true},
{name: "5", type: null, jsonobject: '', level: 2, index: 1, order: true},
{name: "6", type: null, jsonobject: '', level: 2, index: 2, order: true}
];
let index = [];
// 獲取層次的最大值
let maxLevel = 0;
fields.forEach((item) => {
if (item.level > maxLevel) {
maxLevel = item.level;
}
});
console.log('mac', maxLevel);
for (let i = 0; i < maxLevel + 1; i++) {
for (var j = 0; j < fields.length; j++) {
if (fields[j].level === i) {
index.push(j);
break;
}
}
}
// 新增層次說明
this.fieldList = [];
for (let i = 0; i < fields.length; i++) {
let j = index.indexOf(i);
if (j > -1) {
this.fieldList.push({
name: "第" + (j + 1) + '層',
type: null,
jsonobject: '',
level: fields[i].level,
index: 0,
order: false
});
}
this.fieldList.push(fields[i]);
}
if (index.length < fields.length) {
this.fieldList.push({
name: "第" + (index.length + 1) + '層',
type: null,
jsonobject: '',
level: maxLevel + 1,
index: 0,
order: false
});
}
console.log(this.fieldList);
}


reorder(ev) {
try {
if (ev.detail.to === this.fieldList.length) {
ev.detail.to -= 1;
}
// let from = this.fieldList[ev.detail.from];
// let to = this.fieldList[ev.detail.to];
if (ev.detail.from < ev.detail.to) {
this.fieldList[ev.detail.from].level = this.fieldList[ev.detail.to].level;
console.log('aaa', this.fieldList);
// 新增和刪除欄位
this.fieldList.splice(ev.detail.to + 1, 0, this.fieldList[ev.detail.from]);
this.fieldList.splice(ev.detail.from, 1);
// this.fieldList.map((item, index) => {
//if (item.level === to.level) {
//return this.fieldList[index].index = i;
//} else if (item.level > from.level) {
//return;
//}
// });
console.log('bbb', this.fieldList);
} else if (ev.detail.from > ev.detail.to) {
this.fieldList[ev.detail.from].level = this.fieldList[ev.detail.to - 1].level;
console.log('from', this.fieldList[ev.detail.from]);
console.log('to', this.fieldList[ev.detail.to]);

this.fieldList.splice(ev.detail.to, 0, this.fieldList[ev.detail.from]);
console.log('111', this.fieldList);
this.fieldList.splice(ev.detail.from + 1, 1);
console.log('222', this.fieldList);

} else {
ev.detail.complete();
return;
}
// 層次修改(1、層次是否為空)
// let filter = [];
// this.fieldList.forEach((item, index) => {
//if (item.order === false) {
//filter.push({field: item, index: index});
//}
// });
// console.log('chishi', filter);
// filter.forEach((item, index) => {
//item.field.name = '第' + (index + 1) + '層';
//this.fieldList[item.index] = item.field;
// });
// console.log('長度',filter.length)
//
// console.log('長度',this.fieldList.length)
// if (filter.length < this.fieldList.length/2) {
//this.fieldList.push({
//name: "第" + (filter.length + 1) + '層',
//type: null,
//jsonobject: '',
//level: filter.length + 1,
//index: 0,
//order: false
//});
// }
let fields = this.fieldList.filter((item) => {
return item.order === true;
});
console.log('chishi', fields);
let index = [];
let maxLevel = 0;
fields.forEach((item, index, array) => {
if (item.level > maxLevel) {
maxLevel = item.level;
}
});
for (let i = 0; i < maxLevel + 1; i++) {
for (var j = 0; j < fields.length; j++) {
if (fields[j].level === i) {
index.push(j);
break;
}
}
}
console.log('index', index);
// 新增層次說明
this.fieldList = [];
index.sort();
for (let i = 0; i < fields.length; i++) {
let j = index.indexOf(i);
if (j > -1) {
this.fieldList.push({
name: "第" + (j + 1) + '層',
type: null,
jsonobject: '',
level: fields[i].level,
index: 0,
order: false
});
}
this.fieldList.push(fields[i]);
}
console.log(this.fieldList);
if (index.length < fields.length) {
this.fieldList.push({
name: "第" + (index.length + 1) + '層',
type: null,
jsonobject: '',
level: maxLevel + 1,
index: 0,
order: false
});
}
console.log(this.fieldList);


ev.detail.complete();
} catch (e) {
return;
}
}

get() {
console.log(this.fieldList);
let fields=this.fieldList.filter((item)=>{
return item.order==true;
})
console.log(fields);
var levels=[];
fields.forEach((item,index)=>{
if(levels.indexOf(item.level)===-1){
// 新的level值,加入到levels
levels.push(item.level);
}
});
levels.sort();
console.log(levels);
// 改變欄位的level和index
levels.map((level,index)=>{
let i=0;
fields.forEach((item)=>{
if(item.level===level){
item.level=index;
item.index=i;
i++;
}
})
})
console.log(fields);
}

}