7
votes

Comment personnaliser le CSS dans le matériau angulaire 7 glisser-déposer tout en faisant glisser, faire glisser l'aperçu et faire glisser l'espace réservé?

J'ai trouvé quelques exemples basiques d'utilisation des classes .cdk-drag-preview et .cdk-drag-placeholder et ils semblent faire le travail quand ils sont là ne sont pas des éléments imbriqués.

En gros, j'ai une liste d'actions et chaque action est représentée dans un format complexe mat-card . Cette partie est en fait un autre composant, mais pour le bien de cet exemple, je vais le rendre aussi basique que possible.

Mon exemple est similaire à cette structure:

dragStart(e, action) { 
    // initialize start X coord
    this.startX = 0;

    // initialize start Y coord
    this.startY = 0;
}

dragMoved(e, action) {
    // record new position
    this.endX = e.pointerPosition.x;
    this.endY = e.pointerPosition.y;

    // logic to set startX and startY
    // TRYING TO CHANGE CARD BORDER COLOR IF this.endX - this.startX > some number
}

En composant angulaire

<style>
    .my_action { border: 2px solid red; }
</style>

<div class="drop_area" cdkDropList>
    <div *ngFor="let action of actions"
        (cdkDragStarted)="dragStart($event, action)"
        (cdkDragMoved)="dragMoved($event, action)"
        (cdkDragEnded)="dragEnded($event, action)" cdkDrag>

        <mat-card class="my_action">
            {{ action.name }}
        </mat-card>

    </div>
</div>

Je veux pouvoir faire ce qui suit:

Lorsque vous faites glisser une carte vers la gauche, changez la couleur de sa bordure en bleu et en vert lorsque vous la faites glisser vers la droite
Modifiez la couleur de la bordure en conséquence pour l'espace réservé de glissement.

Le problème de l'utilisation de .cdk-drag-preview et .cdk-drag-placeholder semble s'appliquer au div code> (parent de mat-card ); alors que j'essaie de changer la couleur de la bordure de son enfant.

Merci d'avance :)

ADDENDA

Mon défi le plus important est de changer la couleur de la bordure dans l'espace réservé à glisser. J'essaie de changer la couleur de la bordure et la marge gauche de l'espace réservé pour indiquer à l'utilisateur que l'action s'est déplacée vers la gauche ou la droite, représentant différents niveaux dans la liste.

angular html angular-material angular7 drag-and-drop

2 commentaires

avez-vous essayé ce sélecteur? .cdk-drag-preview mat-card, .cdk-drag-placeholder mat-card {}

@onik J'ai essayé mais cela ne fonctionne pas. J'ai l'impression que lorsque vous faites glisser une carte, le matériau crée une structure de copie différente pour l'aperçu et je n'arrive pas à me connecter à cet élément pour changer son CSS dynamiquement

3 Réponses :

0
votes

Vous pouvez faire quelque chose comme ceci:

dragMoved(e, action, index: number) {
    // record new position
    this.endX = e.pointerPosition.x;
    this.endY = e.pointerPosition.y;

    // login to set startX and startY
    // TRYING TO CHANGE CARD BORDER COLOR IF this.endX - this.startX > some number

   document.getElementsByClassName('my_action'+index)[0].style.borderColor='blue';
}

<div class="drop_area" cdkDropList>
<div *ngFor="let action of actions;let i = index;"
    (cdkDragStarted)="dragStart($event, action)"
    (cdkDragMoved)="dragMoved($event, action, i)"
    (cdkDragEnded)="dragEnded($event, action)" cdkDrag>

    <mat-card class="my_action{{i}}">
        {{ action.name }}
    </mat-card>

</div>

2 commentaires

Je vais examiner cela, je pense que j'ai essayé quelque chose comme ça. Mais mon défi le plus important est de changer la couleur de la bordure dans l'espace réservé à glisser

Vous voyez, j'essaie de changer la couleur de la bordure et la marge gauche de l'espace réservé pour indiquer à l'utilisateur que l'action s'est déplacée vers la gauche ou la droite, représentant différents niveaux dans la liste

6
votes

Quelque chose comme ci-dessous atteindrait votre objectif?

Initialisez nativeElement x et y

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');
    }
  }

Comparez le décalage X et utilisez rendere2 pour définir le style sur nativeElement

(cdkDragMoved)="dragMoved($event, action, i)"

Pour changer de couleur tout en faisant glisser, procédez comme suit.

Obtenir une référence à #cdkDropList dans la vue.

*ngFor="let action of actions; let i = index"

Définir l'index dans * ngFor

@ViewChild('cdkDropList') _dropList:any;

Passer l'index à la fonction

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');
    }
  }

Recevoir l'index et atteindre les enfants du cdkDropList pour définir le style.

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;
  }

Stackblitz

https://stackblitz.com/edit/angular-hdskvc?embed = 1 & file = app / cdk-drag-drop-overview-example.ts

4 commentaires

Le problème avec ceci est que cela change la couleur lorsque vous avez fini de déposer la carte. J'essaye de changer la couleur tout en la tenant / en la faisant glisser

voir stackblitz révisé et réponse.

merci, cela se rapproche. Permettez-moi de regarder de plus près une fois au travail;) +1 pour l'effort, c'est sûr

J'accepte cette réponse, car utiliser #cdkDropList et Renderer2 m'a donné assez pour faire ma tâche

0
votes

Lorsqu'un élément cdkDrag est sélectionné, il créera un élément de prévisualisation visible lors du glissement. Ce sera un clone de l'élément d'origine. L'élément cloné supprimera son attribut id et ajoutera la classe .cdk-drag-preview.

Utilisez cdkDragMoved avec prudence, car cet événement se déclenchera pour chaque pixel que l'utilisateur a fait glisser.

export class CustomComponent {
    cloned: any;

    actions = [
        { name: "one" },
        { name: "two" },
        { name: "three" }
    ];

    constructor(private _renderer: Renderer2) { }

    dragStart(event) {
        this.cloned = document.getElementsByClassName("cdk-drag-preview")[0];
    }

    dragMoved(event) {
        this._renderer.removeClass(this.cloned, "red");
        this._renderer.removeClass(this.cloned, "green");

        const distance: { x: number, y: number } = event.distance;
        this._renderer.addClass(this.cloned, (distance.x > 0) ? "green" : "red");
    }
}

<div cdkDropList class="example-list">
    <div class="example-box" *ngFor="let action of actions" cdkDrag 
        (cdkDragStarted)="dragStart($event)"
        (cdkDragMoved)="dragMoved($event)">
        {{ action.name }}
    </div>
</div>

0 commentaires