javascript - 如何在开始时将 react 可拖动元素居中？ (模态，div)

Question

如何在开始时将 react-draggable 元素居中？我有一个由可 react 拖动的组件包裹的模态。我想在模式打开后，将他的位置放在浏览器中。我尝试将百分比值传递给 defaultPosition，但我无法传递百分比 defaultPostion={{ x: 50%, y: 50% };} 但没有结果。

Answer 1

React draggable 有一个名为 positionOffSet 的选项，它让我们有机会设置可拖动元素的初始偏移量。这不同于 defaultPosition 并接受 %value。您可以查看 React Draggable 文档了解详细信息。

<Draggable positionOffset={{ x: '-50%', y: '-50%' }}}>
  <div className='myElement'>
    This is my draggable element
  </div>
</Draggable/>

现在，我们需要做的就是像这样向我们的元素添加一些样式:

.myElement{z-index:999; position: absolute; top: 50%; left: 50%;}

这将使模态元素在页面中间居中，无论它具有什么尺寸。