如何在开始时将反应可拖动元素居中？（模态，div）答案

【问题标题】：How to center react-draggable element on start? (modal, div)如何在开始时将反应可拖动元素居中？（模态，div）
【发布时间】：2018-11-23 22:57:35
【问题描述】：

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

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

我找到了解决方案，但我无法再访问。解决方案是动态更改 defaultPosition 的位置：获取已点击元素的位置并动态计算屏幕中心。

【讨论】：

【解决方案2】：

使用 css3，最好和最简单的 react 解决方案：

.center { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

【讨论】：

很遗憾，这个解决方案无法工作，因为defaultPosition 替换了 CSS 转换

【解决方案3】：

您不能使用 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;

【讨论】：

【解决方案4】：

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%;}

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

【讨论】：

【解决方案5】：

尝试在您的百分比周围使用引号，例如 defaultPosition={{ x: '50%', y: '50%' }}

【讨论】：