Рассчитать X и Y на основе ширины и высоты элемента

Question

Я хотел бы преобразовать текущие width и height элемента в положение x, y.

this.minWidth - это минимальная ширина компонента, она может быть примерно равна 60, this.minHeight - то же, что и выше, это константа.

В initDrag(e) Я инициализирую оба начальных значения width и height.

const element = document.querySelector(`.id-${this.data.id}`);

this.startWidth = parseInt(document.defaultView.getComputedStyle(element).width, 10);
this.startHeight = parseInt(document.defaultView.getComputedStyle(element).height, 10);

В onDrag(event) Я устанавливаю ток width и height элемента, и после этих настроек я хотел бы преобразовать их в положение x и y.На основе системы css grid.

const width = this.startWidth + event.clientX - this.startX;
const height = this.startHeight + event.clientY - this.startY;

Я написал два метода, которые пересчитывают их, но кажется, что они не работают должным образом.

getColumnBasedOnWidth(width) {
    const spacingBetweenColumns = 21;
    const numberOfColumnSpacings = (Math.floor(width / this.minWidth) - 1);
    return Math.floor((width - numberOfColumnSpacings * spacingBetweenColumns) / this.minWidth);
},
getRowBasedOnHeight(height) {
    const spacingBetweenRows = 41;
    const numberOfRowSpacings = (Math.floor(height / this.minHeight) - 1);
    return Math.floor((height - numberOfRowSpacings * spacingBetweenRows) / this.minHeight);
},

Между каждым столбцом есть разрыв, равный 21, между каждой строкойзазор равен 41.

Макет CSS макета выглядит следующим образом:

    // Default layout schema:
    //                           COLUMNS
    //    1         2   2         3   3         4   4         5
    //
    //   1 ----------------------------------------------------
    //    |                                                    |
    //    |                      SECTION                       |
    //   2 ----------------------------------------------------
    //
    // R 2 ----------    ----------    ----------    ----------
    // O  |    X     |  |          |  |          |  |          |
    // w  |   ITEM   |  |   ITEM   |  |   ITEM   |  |   ITEM   |
    //   3 ----------    ----------    ----------    ----------
    //
    //   3 ----------------------------------------------------
    //    |                                                    |
    //    |                      SECTION                       |
    //   4 ----------------------------------------------------
    // And so on

Мы можем начать изменение размера элемента при перетаскивании в правом нижнем углу.В качестве примера, мы можем перетащить первый элемент, помеченный как X, и отслеживать его положение, преобразованное в x, y.