Может ли что-то, как показано ниже, достичь вашей цели?
Инициализировать nativeElement
x и y
dragStart(e, action) {
const rect = e.source.element.nativeElement.getBoundingClientRect();
// initialize start X coord
this.startX = rect.x;
// initialize start Y coord
this.startY = rect.y;
}
Сравнить смещение X и использовать rendere2
, чтобы установить стиль на nativeElement
dragMoved(e, action) {
// record new position
this.currentX = e.event.clientX;
this.currentY = e.event.clientY;
// logic to set startX and startY
// TRYING TO CHANGE CARD BORDER COLOR IF this.endX - this.startX > some number
if(this.startX < this.currentX){
this._renderer.setStyle(e.source.element.nativeElement, 'border-style', 'solid');
this._renderer.setStyle(e.source.element.nativeElement, 'border-color', 'green');
}
else if (this.startX > this.currentX){
this._renderer.setStyle(e.source.element.nativeElement, 'border-style', 'solid');
this._renderer.setStyle(e.source.element.nativeElement, 'border-color', 'blue');
}
}
Редакция:
Чтобы изменить цвет при перетаскивании, выполните следующие действия.
Получите ссылку на #cdkDropList
в представлении.
@ViewChild('cdkDropList') _dropList:any;
Установить индекс в *ngFor
*ngFor="let action of actions; let i = index"
Передать индекс в функцию
(cdkDragMoved)="dragMoved($event, action, i)"
Получить индекс и обратиться к дочерним элементам cdkDropList
, чтобы установить стиль.
dragMoved(e, action, i) {
// record new position
this.currentX = e.event.clientX;
this.currentY = e.event.clientY;
// logic to set startX and startY
// TRYING TO CHANGE CARD BORDER COLOR IF this.endX - this.startX > some number
if(this.startX < this.currentX){
this._renderer.setStyle(this._dropList.nativeElement.children[i], 'border-style', 'solid');
this._renderer.setStyle(this._dropList.nativeElement.children[i], 'border-color', 'green');
}
else if (this.startX > this.currentX){
this._renderer.setStyle(this._dropList.nativeElement.children[i], 'border-style', 'solid');
this._renderer.setStyle(this._dropList.nativeElement.children[i], 'border-color', 'blue');
}
}
Stackblitz
https://stackblitz.com/edit/angular-hdskvc?embed=1&file=app/cdk-drag-drop-overview-example.ts