如何在启动时将可拖动元素置于居中位置？ （模态，div）

Question

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

Answer 1

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

Answer 2

使用css3，这是最佳，简单的React解决方案：

  

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

Answer 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;

Answer 4

尝试在您的百分比周围使用引号，例如Adding visible gpu devices: 0, 1, 2, 3, 4, 5, 6, 7