Question

我想将元素的当前width和height转换为x, y的位置。

this.minWidth-这是组件的最小宽度，可以像const 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的位置。

根据元素的宽度和高度计算X和Y

0 个答案: