'How to center react-draggable element on start? (modal, div)

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% };} but without result.

javascripthtmlcssreactjs


Solution 1:[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.

Solution 2:[2]

with css3, the best and simple solution for react:

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

Solution 3:[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;

Solution 4:[4]

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.

Solution 5:[5]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pyot
Solution 2 Mason Zhang
Solution 3 Francesco Orsi
Solution 4 Enes
Solution 5 Badis Merabet

Related Questions