How to use react-draggable for modal using ant-design?

Question

I decided to use the react-draggable npm package for my modal window using ant-design, (for those who don't know react-draggable, this is a simple component for making elements draggable). But I am having difficulty, I tried to wrap my modal window inside but I got an error.

Cannot read property 'className' of undefined

import React, { useState } from "react";
import "antd/dist/antd.css";
import Modal from "antd/es/modal/Modal";
import Draggable from "react-draggable";
import Button from "antd/es/button";

const App = (props) => {
  const [visible, setVisible] = useState(false);

  return (
    <Draggable>
      <Button onClick={() => setVisible(true)} type="primary">
        Themes
      </Button>
      <Modal
        title="Customize the theme to your liking"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={700}
      >
        <div className={"SideBarModal_Wrapper"}>
          <div className={"SideBarModal_Appearance"}>
            <div className={"SideBarModal_Child_Appearance"}>
              <p>Appearance</p>
            </div>

            <div>{props.SideBarWallpaperList}</div>
          </div>

          <div className={"SideBarModal_Accept_Color"}>
            <div className={"SideBarModal_Child_Color"}>
              <p>Colors</p>
            </div>

            <div>{props.list}</div>
          </div>
        </div>
      </Modal>
    </Draggable>
  );
};

export default App;

You can see my code in codesandbox there I have already installed all the required packages, but I could not apply react-draggable. Here is the link https://codesandbox.io/s/xenodochial-mendel-4bdun

score 0 · Answer 1 · answered Jan 31 '21 at 20:55

0

I believe you need to have a single child element in Draggable.

So either put only the Button in the Draggable or wrap your Button and Modal in a div.

updated: https://codesandbox.io/s/currying-river-olme0?file=/src/App.js

answered Jan 31 '21 at 20:55

Gabriele Petrioli

191,379
34
261
317

Sorry, but I need to move the modal and not the button – Synchro Jan 31 '21 at 23:07

Sudhansu Choudhary · Answer 2 · 2021-01-31T21:06:38.953

The documentation says it loud and clear, Only a single child is allowed or an Error will be thrown. :)

Bind the child components as one single child. (e.g, using a div as I've done below)

import React, { useState } from "react";
import "antd/dist/antd.css";
import Modal from "antd/es/modal/Modal";
import Draggable from "react-draggable";
import Button from "antd/es/button";

const App = (props) => {
  const [visible, setVisible] = useState(false);

  return (
    <Draggable>
      <div>
      <Button onClick={() => setVisible(true)} type="primary">
        Themes
      </Button>
      <Modal
        title="Customize the theme to your liking"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={700}
      >
        <div className={"SideBarModal_Wrapper"}>
          <div className={"SideBarModal_Appearance"}>
            <div className={"SideBarModal_Child_Appearance"}>
              <p>Appearance</p>
            </div>

            <div>{props.SideBarWallpaperList}</div>
          </div>

          <div className={"SideBarModal_Accept_Color"}>
            <div className={"SideBarModal_Child_Color"}>
              <p>Colors</p>
            </div>

            <div>{props.list}</div>
          </div>
        </div>
      </Modal>
      </div>
    </Draggable>
  );
};

export default App;

Unfortunately, your approach did not work if everything works fine for you, please give me a link to the code on codesandbox — Synchro, Jan 31 '21 at 21:24
It does work! I think you have added the `div` to your link as I've suggested and the button is draggable. What were you expecting? Read the documentation if you need to add more features. If you need the modal to be draggable, put only the modal inside the Draggable component and the button outside. — Sudhansu Choudhary, Jan 31 '21 at 21:28
Take a look at your code there you can drag the button and not the modal https://codesandbox.io/s/xenodochial-mendel-4bdun — Synchro, Jan 31 '21 at 23:00

score 0 · Answer 3 · answered Jan 09 '22 at 10:13

The basic concept is actually like this :

import Draggable from 'react-draggable';

<div className="modal fade show d-block" id="myModal">
  <div className="modal-dialog">

   <Draggable> 
     
    <div className="modal-content">
      <div className="modal-header">
        <h4 className="modal-title">Modal Heading</h4>
        <button type="button" className="close" data-dismiss="modal">&times;</button>
      </div>
      <div className="modal-body">
        <h4>This is body</h4>
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>

    </Draggable> 

  </div>
</div>

Try to figure out how to change it if you use react-bootstrap

How to use react-draggable for modal using ant-design?

3 Answers3