Touchstart, touchend, touchmove with css grid

[cmarrero01]

Hi

I need to change the background of columns when the user touch one column, and if the user moves without release the finger, need to change the background of the column where is the finger of the user and the previous column go back to normal.

For example if I start touching the 3 colum

The 3erd column will be black

But if the user moves without release, the other columns need to change to black like this:

I try with something like this:

<div (touchmove)="onMoveShoot($event)" (touchstart)="onPressShoot(1);" (touchend)="onReleaseShoot(1);" class="grid-item1 A1">1</div>

onPressShoot(col:any){
    console.log("Press",col);
    this.shotColum = col;
  }

  onReleaseShoot(col:any){
    console.log("Release:",col);
    this.shotColum = 0;
  }

  onMoveShoot(event){
    console.log("Move",event);
    // console.log('test'+col);
  }

.shootActive{
  background-color: black;
}

The problem with this approach is that the touchmove doesn’t know in wich column the user is and the touchend neither.

Any suggestion?