Как настроить CSS в Angular материал 7 перетаскивая при перетаскивании, перетащите предварительный просмотр и перетащите заполнитель? - PullRequest
0 голосов
/ 18 апреля 2019

Я нашел несколько основных примеров использования классов .cdk-drag-preview и .cdk-drag-placeholder, и они, кажется, выполняют свою работу, когда они не являются вложенными элементами.

По сути, у меня есть список действий икаждое действие представлено в сложном формате mat-card.Эта часть фактически сделана как другой компонент, но ради этого примера я сделаю его как можно более простым.

Мой пример похож на эту структуру:

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

В угловом компоненте

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
}

Я хочу иметь возможность сделать следующее:

  • При перетаскивании карты влево измените цвет ее границы на синий и зеленый при перетаскивании вправо.
  • Измените цвет границы соответственно для заполнителя перетаскивания.

Проблема использования .cdk-drag-preview и .cdk-drag-placeholder, кажется, относится к перетаскиваемому div (родительский элемент mat-card);в то время как я пытаюсь изменить цвет границы его ребенка.

Заранее спасибо:)

ADDENDUM

Моя самая важная задача - изменитьцвет границы в перетаскивающем заполнителе.Я пытаюсь изменить цвет границы заполнителя и левое поле, чтобы указать пользователю, что действие перемещено влево или вправо, представляя различные уровни в списке.

Ответы [ 2 ]

2 голосов
/ 18 апреля 2019

Может ли что-то, как показано ниже, достичь вашей цели?

Инициализировать 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

0 голосов
/ 18 апреля 2019

Вы можете сделать это примерно так:

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