Как смещать серый квадрат только после прохода курсором ячейки?

Question

[ModestesGonze]

Демо.

Пытаюсь сделать, чтобы серый квадрат не постоянно бегал за мышкой, а как бы перемещался по ячейкам и зависал только над ячейкой над которой курсор.
Как я понимаю, нужно вычислять каждый раз 50px относительно текущего положения курсора.
Сложность в том, что ячейки это не DOM элементы, а градиентный фон.

Answer 1

[0xD34F]

data: () => ({
  size: 52,
  col: 0,
  row: 0,
}),
methods: {
  onMouseMove(e) {
    this.col = e.offsetX / this.size | 0;
    this.row = e.offsetY / this.size | 0;
  },
},
computed: {
  blockStyle() {
    return {
      backgroundSize: `${this.size}px ${this.size}px`,
    };
  },
  blockCursorStyle() {
    const { col, row, size } = this;
    return {
      transform: `translate(${col * size}px, ${row * size}px)`,
      width: `${size * 0.95}px`,
      height: `${size * 0.95}px`,
    };
  },
},

<div class="block" :style="blockStyle" @mousemove="onMouseMove">
  <div class="block-cursor" :style="blockCursorStyle"></div>
</div>

https://jsfiddle.net/La4297zd/

Почему вместо координат курсора хранятся индексы столбца и строки - это чтобы при изменении размера не случалось переключения подсветки на другую ячейку.

Comments

[vetsmen]

Почему битовое | с нулем отсекает дробную часть?

[0xD34F]

Потому что битовые операции выполняются над целыми числами.