web-dev-qa-db-fra.com

Comment personnaliser le CSS In Angular Matériau 7 Faites glisser et déposez pendant le glisser, faites glisser la prévisualisation et faites-le glisser l'espace réservé?

J'ai trouvé des exemples de base d'utiliser .cdk-drag-preview et .cdk-drag-placeholder classes et ils semblent faire le travail quand il n'y a pas d'éléments imbriqués.

Fondamentalement, j'ai une liste d'actions et chaque action est représentée dans un complexe mat-card format. Cette partie est réellement effectuée comme un autre composant, mais pour l'intention de cet exemple, je le ferai aussi fondamental que possible.

Mon exemple est similaire à cette structure:

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

IN angular Composant

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
}

Je veux pouvoir faire ce qui suit:

  • Tout en faisant glisser une carte vers la gauche change sa couleur de bordure en bleu, et vert lors du glissant droit
  • Changer la couleur de la bordure en conséquence pour le placement de drag.

La question de l'utilisation .cdk-drag-preview et .cdk-drag-placeholder semble appliquer à la draggable div (parent de mat-card); ATTENDU QUE, j'essaie de changer la couleur de la frontière de son enfant.

Merci d'avance :)

ADDENDUM

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

angularhtmldrag-and-dropangular-materialangular7
8
Brian

Lorsqu'un élément CDKDRAG est ramassé, il créera un élément de prévisualisation visible tout en faisant glisser. Ce sera un clone de l'élément d'origine. L'élément cloné supprimera son attribut d'identification et ajoutera la classe .CDK-glisser-aperçu.

Utilisez CDKDRAGMOVEt avec prudence, car cet événement déclenchera pour chaque pixel que l'utilisateur a traîné.

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

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");
    }
}
1
Cristian

Vous pouvez le faire quelque chose comme ça:

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

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';
}
0
Sumit Parakh