点击拖拽触发方式(Angular)

Question

我有一个 table，我希望用户能够通过单击并在多个单元格中拖动来触发方法（即，更改 clicked/dragged 单元格的背景颜色）结束）。

我想在 Angular 中创建这个。

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

它应该是这样的：

组件：

<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

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

Answer 2

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

检查这个 stackblitz 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
}

点击拖拽触发方式(Angular)

Trigger method with click and drag (Angular)

click

drag

angular