MaterialUI - Dialog component

[RemyMachado]

How to replicate the draggable dialog behavior from MUI.

To prevent the backdrop to be dragged, you must apply the style only on the PaperComponent via PaperProps.

Here's an example:

const DraggableDialog = () => {
  const { listeners, setNodeRef, transform } = useDraggable({
    id: 'unique-id',
  })
  const style = transform
  ? {
      transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
    }
  : undefined

  // ...
  
  return (
      <Dialog
        // 1) set the ref
        ref={setNodeRef}
        open={isOpenDialog}
        onClose={closeDialog}
        // 2) pass the style ONLY to the `PaperComponent`
        PaperProps={{
          style,
        }}
      >
        {/* 3) pass `listeners` to the component that you want to be an handle */}
        <DialogTitle {...listeners}>Drag me</DialogTitle>
        <DialogContent>Content of the dialog</DialogContent>
      </Dialog>
  )
}