Question

在我的项目中，我有一个这样的结构：

<div className='slot-view'>
    <div className='slot-view-drop-target'>
        <div className='element' />
        <div className='element' />
        <div className='element' />
    </div>
</div>

slot-view基本上是window，100％宽度和高度。

slot-view-drop-target的高度和宽度等于高度的80％，并且位于slot-view的中间位置。

然后我element的{{1}}和top属性可能因拖放而发生变化。出于存储目的，我将left和top值作为百分比值存储在我的服务器上，然后在我呈现left时将其转换为px，因为element可以出现的不同背景。

所以我想要实现的目标是：

获取px中element的左侧（或顶部）px值，然后从该顶部/左侧位置添加x％，将slot-view-drop-target放置在我想要的位置。

当我想要element element top和left 0％时，它会转换为位于slot-view的左上角位于slot-view-drop-target的左上角。

出于React中拖放库的目的，我使用绝对定位和上/下。如果我使用相对定位，当我移动一个元素时，它会导致其他元素跳跃，所以这里需要考虑。

谢谢！

Answer 1

在我看来，您的相对定位上下文也需要被带到.slot-view-drop-target，因此当您绝对将.elements放在其中时，它们将

在流程之外，这意味着他们不应该互动
距离.slot-view-drop-target

但是，如果你真的需要.slot-view-drop-target的顶部/左侧坐标位置，那么它只是JS的一些简单数学。

（screen-size.x * .1）=你的起始x坐标
（screen-size.y * .1）=你的起始y坐标

.1是1（100％） - .8（.slot-view-drop-target width，80％）/ 2
2是因为它在屏幕中居中

如何在容器内绝对定位元素X％？

1 个答案: