CODEWITHSUNDEEP
javascriptangulartypescript
user6440081
user6440081

Reputation:

Angular mousedown/mouseover on table cells

I want to highlight table cells on mousedown/mouseover behaviour. So whenever I have the mouse pressed and hover over a cell, it shall be highlighted.

In this simple example, there is a small issue: on every second click the mouse gets stuck with the disable-symbol (see screenshot), and the mousedown will not fire until I perform another click.

enter image description here

HTML:

<table>
  <tr *ngFor="let rows of groups">
    <td *ngFor="let cell of rows.row" 
        (mousedown)="down(cell)" 
        (mouseover)="over(cell)"
        (mouseup)="up()"
        [class.active]="cell.isChecked"
    ></td>
  </tr>
</table>

TS:

  active: boolean = false

  down(b) {
    this.active = true
    if (this.active)
      b.isChecked = !b.isChecked
  }

  over(b) {
    if (this.active) 
      b.isChecked = !b.isChecked
  }

  up() {
    this.active = false
  }

Is it an event issue of the mouse, browser related or code related?

Thanks in advance.

Upvotes: 0

Views: 1099

Answers (2)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Try like this:

.html

<table>
  <tr *ngFor="let rows of groups">
    <td *ngFor="let cell of rows.row" 
        (mouseleave)="!cell.isSelected ? cell.isChecked = true : false" 
        (mouseover)="cell.isChecked = false"
        (click)="cell.isSelected = !cell.isSelected"
        [class.active]="cell.isChecked"
    ></td>
  </tr>
</table>

.ts

groups = [
  {
  row: [
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false}
  ],
   ...
 }

Demo

Upvotes: 0

uminder
uminder

Reputation: 26150

The simbol must be related to drag-n-drop feature. Try to add the following attributes to the td element.

ondragstart="return false;" ondrop="return false;"

Upvotes: 1

Related Questions