Question

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

Dialog doc

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

Issue here

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

提前致谢

Answer 1

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

Answer 2

尝试

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>

使材料-ui对话框可拖动

2 个答案: