I'm attempting to manipulate an HTMLCollection accessible via an Angular nativeElement The component I'm working with makes use of the CdkDrag, CdkDragDrop elements from @angular/cdk/drag-drop
The bug I'm addressing concerns the user not being able to reorder an element when the list spans more than one line.
Upon dropping the list item, this is what I've added:
// Check if we're over two or more lines
if (this.dropContainer.element.nativeElement.clientHeight > 32) {
// Drop the element at the current index
const index = this._initialFacetOrder.findIndex((a) => a === this.data.title);
if (index) {
const toMove = this._initialFacetOrder[index];
this._initialFacetOrder.splice(index, 1);
// Next add the element at the required position
this._initialFacetOrder.splice(event.currentIndex, 0, toMove);
const arr = Array.from(this.dropContainer.element.nativeElement.children);
// Reorder the array to what we want
const myArr = arr.sort((a,b) => {
return this._initialFacetOrder.indexOf(a['outerText']) - this._initialFacetOrder.indexOf(b['outerText']);
});
// parent node
const parent = this.dropContainer.element.nativeElement;
for (let i = 0; i < myArr.length; i++) {
parent.removeChild(myArr[i]);
}
// children is empty
console.log(parent.children);
for (let j = 0; j < myArr.length; j++) {
parent.appendChild(myArr[j]);
}
// Order doesn't match the sorted array
console.log(parent.children);
}
}
So, I'm reordering the this._initialFacetOrder according to where the user drops the list item, which is correct, but when I remove the child elements and then add them back based on the new array order, the order isn't correct.
Why is this?
Note - I'm going to see if I can spin up a stackblitz highlighting this.