"<i>How to center react-draggable element on start?<\/i>如何在开始时将反应可拖动元素居中？<\/b> <i>(modal, div)<\/i> （模态，div）<\/b>"

Question

How to center react-draggable element on start? I have a modal that is wrapped by react-draggable a component. I would like to after the modal is open, center his position in a browser. I try pass to a defaultPosition a percentage value but I'm not able to pass percentage defaultPostion={{ x: 50%, y: 50% };}<\/code> but without result.

"

Answer 1

I found solution but I don't have access no more. The solution is to change dynamically position for defaultPosition: get position of element that has been clicked and dynamically calculate center of the screen.

Answer 2

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

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

Answer 3

You can't use CSS transform because defaultPosition replace it.

You can use margin , I normally use this solution:

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

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

Answer 5

React draggable has an option named positionOffSet which gives us a chance to set the initial offset of the draggable element. This is different than the defaultPosition and accepts %value . You can check the React Draggable docs for details.

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

Now, all we need to do is to add few styles to our element like so:

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

This will center the modal element in the middle of the page, no matter what dimensions it has.