Search code examples
javascriptreactjsstyled-components

How to specify a child component to drag its parent component in React?

I'm currently working on a terminal emulator project using React and styled-components. I want to add dragging feature to the terminal. Everything is good, except one thing: I want to click and hold the title bar to drag the terminal, not somewhere else.

Here is my base component: https://codesandbox.io/s/still-http-jxxex

I don't want to use any plugins or libraries because I want to know how it works. So are there any ways to achieve this just by React and javascript? Every comments are appreciated to me.

Solution

  • After days of searching, I found out the problem is that I triggered onMouseDown in window (globally).

    In order to do this, I use a function that passed to the child component to update its parent component's states, which is onMouseDown, then got rid of the function in useEffect.

    Here's my final solution: https://codesandbox.io/s/admiring-liskov-puu6g