0
91
Vistas¿Se corrigió la clasificación usando cdkDrag en Angular2?
Estoy tratando de evitar mover el elemento que está deshabilitado durante la clasificación usando la función de arrastrar y soltar de Angular CDK
<div cdkDropList class="example-list" [cdkDropListSortPredicate]="sortPredicateForDisableItem(items)" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let item of items" cdkDrag [cdkDragDisabled]="item.disabled">{{item.value}}</div> </div>en componente,
public items = [ {value: 'I can be dragged 1', disabled: false}, {value: 'I can be dragged 2 ', disabled: false}, {value: 'I cannot be dragged and i want to be fixed in position 3', disabled: true}, {value: 'I can be dragged 4 ', disabled: false,dinesh: 'kumar'}, ]; sortPredicateForDisableItem(items: any) { // This logic fails to prevent moving disabled item return function(index: number, item: CdkDrag, drop: CdkDropList){ return items[index].disabled === false } }Antes de clasificar
Después de ordenar, Item3 cambia a una nueva posición y no se puede fijar en su posición
¿Se puede fijar el elemento que tiene una propiedad deshabilitada en la posición a la que pertenece? La expectativa es que el elemento deshabilitado siempre se mantenga en el mismo índice/posición durante la clasificación. por favor avise
1 Respuestas
Responde la pregunta0
No puede simplemente "bloquear" el elemento deshabilitado en su lugar, ya que, por ejemplo, arrastrar algo del índice 0 al índice 3 afectará los índices de todos los elementos intermedios. Lo que tiene que hacer es no permitir acciones de arrastre que cambiarían el índice del elemento deshabilitado.
Entonces, lo que debes hacer es:
- Cargue elementos y clasifíquelos en el orden correcto.
- Cambie la lógica de arrastrar y soltar para verificar si la acción está permitida
- No permita la acción o modifique sus efectos según la lógica deseada
He bifurcado su stackblitz aquí y preparé una solución simple. No lo he probado a fondo, pero debería darle una idea básica de cómo debería funcionar.
Lo que hace es básicamente escribir una función moveItemInArray personalizada basada en la original de aquí :
private moveItemInArrayIfAllowed( array: any[], fromIndex: number, toIndex: number ): void { const from = this.clamp(fromIndex, array.length - 1); const to = this.clamp(toIndex, array.length - 1); if (from === to) { return; } const target = array[from]; const delta = to < from ? -1 : 1; const affectedItems = array.filter((item, index) => delta > 0 ? index >= from && index <= to : index >= to && index <= from ); // If any of the items affected by the index changes is disabled // don't move any of the items. if (affectedItems.some((i) => i.disabled)) { return; } for (let i = from; i !== to; i += delta) { array[i] = array[i + delta]; } array[to] = target; } private clamp(value: number, max: number): number { return Math.max(0, Math.min(max, value)); }