React draggable有一个名为
如何在启动时居中反应可拖动元素？我有一个模态，它被可拖动的组件反作用包裹。我想在模态打开后，在浏览器中居中定位。我尝试将百分比值传递给defaultPosition，但无法传递百分比defaultPostion={{ x: 50%, y: 50% };}，但没有结果。
positionOffSet的选项，它让我们有机会设置draggable元素的初始偏移量。这与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%;}
这将模态元素集中在页面的中间，无论它有什么维度。
我找到了解决方案，但我再也无法访问了。解决方案是动态更改defaultPosition的位置：获取被点击元素的位置，并动态计算屏幕中心。
您不能使用CSS转换，因为defaultPosition会替换它。
你可以使用margin，我通常使用这个解决方案：
import React, { useState, useEffect } from "react"
import Draggable from 'react-draggable';
function MyComponent() {
const [boxSize, setBoxSize] = useState({ w: 0, h: 0 });
useEffect(() => {
setBoxSize({
w: document.querySelector('.container').clientWidth / -2,
h: document.querySelector('.container').clientHeight / -2
});
}, []);
return (
<Draggable>
<div style={{
marginLeft: boxSize.w,
marginTop: boxSize.h
}} className="container">
{/* ... */}
</div>
</Draggable>
);
}
export default MyComponent;
css3是react的最佳简单解决方案：
.center { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
试着在百分比周围使用引号，比如defaultPosition={{ x: '50%', y: '50%' }}