如何使用 ant-design 将 react-draggable 用于模态？

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

Answer 1

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

Answer 2

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. (eg, 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;

Answer 3

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