Making a material-ui dialog draggable

user_4226430 0
Viewed 5124

I'm trying to use material-ui Dialog feature.

Dialog doc

We need to make the dialog draggable across the view port. As per below issue, material-ui doesn't have this functionality by default.

Issue here

I tried using react-draggable by enclosing the dialog with the draggable component. It doesnt work. Has anyone faced this issue?

Thanks in advance

material-ui reactjs
2 Answers

try this

import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import Paper from "@material-ui/core/Paper";
import Draggable from "react-draggable";
...

const PaperComponent = (props) => {
  return (
    <Draggable
      handle="#draggable-dialog-title"
      cancel={'[class*="MuiDialogContent-root"]'}
    >
      <Paper {...props} />
    </Draggable>
  );
}
...

<Dialog PaperComponent={PaperComponent} {...otherDialogProps}>
  <DialogTitle style={{ cursor: "move" }} id="draggable-dialog-title">
    Title
  </DialogTitle>
</Dialog>
user_113697910
Related