How to center react-draggable element on start? I have a modal that is wrapped by react-draggable a ponent. 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% };} but without result.

How to center react-draggable element on start? I have a modal that is wrapped by react-draggable a ponent. 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% };} but without result.

• javascript
• html
• css
• reactjs

5 Answers 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.

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.

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;

with css3, the best and simple solution for react:

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

Try to use quotation around your percentages, like defaultPosition={{ x: '50%', y: '50%' }}