Метод запуска с помощью щелчка и перетаскивания (угловой) - PullRequest
Новая
       18

Метод запуска с помощью щелчка и перетаскивания (угловой)

1 голос
/ 16 апреля 2019

У меня есть таблица, в которой я хотел бы, чтобы пользователи могли запускать метод одним щелчком мыши и перетаскивать его по нескольким ячейкам (т. Е. Изменять цвет фона ячеек, которые были перемещены / перетащены).

Я хочу создать это в Angular.

Когда я использую метод щелчка, он запускается только в ячейке, которая была нажата первой, а не в любых других ячейках, где мышь нажата (т. Е. Я должен щелкнуть каждую ячейку, чтобы выделить или отменить ее выделение).

Это должно выглядеть так: enter image description here

Ниже приведен стек стека

Компонент: 

<table>
  <TR>
    <TD *ngFor="let b of colCount" 
        (click)="b.highlight = !b.highlight" 
        [class.highlight]="b.highlight"
    ></TD>
  </TR>
</table>

TS: 

 colCount = [{highlight: true},{highlight: true},{highlight: true},{highlight: true},{highlight: true},{highlight: true}]

  select(b) {
    console.log(b)
    b.highlight = !b.highlight
  }

CSS: 

td {
 border: 1px solid black;
 width: 20px !important;
 height: 20px !important;
}

.highlight {
  background-color: blue;
}

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

Он просто проверяет, не нажата ли мышь, и входит в следующий блок.

Проверьте этот стек https://stackblitz.com/edit/angular-55xflc

HTML 

<table>
  <tr>
    <td *ngFor="let b of colCount" 
        (mousedown)="mousedown(b)" 
        (mouseover)="mouseover(b)"
        (window:mouseup)="mouseup()"
        [class.highlight]="b.highlight"
    ></td>
  </tr>
</table>

TS 

down: boolean = false

colCount = [{highlight: true},{highlight: true},{highlight: true},{highlight: true},{highlight: true},{highlight: true}]

mousedown(b) {
  this.down = true
  if (this.down) {
    b.highlight = !b.highlight
  }
}

mouseover(b) {
  if (this.down) {
    b.highlight = !b.highlight
  }
}

mouseup() {
  this.down = false
}
0 голосов
/ 16 апреля 2019

Как предлагается в комментариях, вы ищете различные mouse события, что-то вроде этого, вероятно, должно сработать.

Возможно, вам придется немного настроить его, чтобы убедиться, что он работает именно так, как вы хотите, но это должно стать хорошей отправной точкой. 

<table>
  <TR>
    <TD *ngFor="let b of colCount"
        (click)="b.highlight = !b.highlight"
        (mousedown)="mouseIsDown = true"
        (mouseup)="mouseIsDown = false"
        (mouseleave)="mouseIsDown ? b.highlight = !b.highlight : null"
        [class.highlight]="b.highlight"
    ></TD>
  </TR>
</table>

export class Component {
  mouseIsDown = false;
  ...
}

Демо

...