单击和拖动的触发方法（角度）

Question

我有一张桌子，我希望用户能够通过单击并在多个单元格之间拖动来触发方法（即，更改被单击/拖动的单元格的背景颜色）。

我想在Angular中创建它。

当我使用click方法时，它仅在第一次单击的单元格上触发，而不是在鼠标按下时触发的其他任何单元格（即，我必须单击每个单元格以突出显示或取消突出显示）。

它应该看起来像这样：

下面是stackblitz

组件：

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

Answer 1

它只是检查鼠标是否按下并进入下一个区块。

检查此堆叠闪电战 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
}

Answer 2

正如评论中所建议的那样，您正在寻找各种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;
  ...
}

---

Demo