使材料-ui对话框可拖动

时间:2017-07-04 10:14:36

标签: reactjs material-ui

我试图使用material-ui Dialog功能。

Dialog doc

我们需要在视图端口上使对话框可拖动。 根据以下问题,材料-ui默认情况下不具备此功能。

Issue here

我尝试使用react-draggable 通过用可拖动组件包含对话框。它不起作用。有人遇到过这个问题吗?

提前致谢

2 个答案:

答案 0 :(得分:2)

所以,经过多次尝试,我放弃了材料UI对话框并编写了自己的模态。 反应可拖动的工作正如预期那样。

答案 1 :(得分:0)

尝试

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>