diff --git a/docs/src/pages/components/dialogs/DraggableDialog.js b/docs/src/pages/components/dialogs/DraggableDialog.js
index 8b675060333a71..5c437ed96a00a9 100644
--- a/docs/src/pages/components/dialogs/DraggableDialog.js
+++ b/docs/src/pages/components/dialogs/DraggableDialog.js
@@ -10,7 +10,7 @@ import Draggable from 'react-draggable';
 
 function PaperComponent(props) {
   return (
-    <Draggable cancel={'[class*="MuiDialogContent-root"]'}>
+    <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
       <Paper {...props} />
     </Draggable>
   );
diff --git a/docs/src/pages/components/dialogs/DraggableDialog.tsx b/docs/src/pages/components/dialogs/DraggableDialog.tsx
index 3588ce47fd12ad..b91c4659c3081e 100644
--- a/docs/src/pages/components/dialogs/DraggableDialog.tsx
+++ b/docs/src/pages/components/dialogs/DraggableDialog.tsx
@@ -10,7 +10,7 @@ import Draggable from 'react-draggable';
 
 function PaperComponent(props: PaperProps) {
   return (
-    <Draggable cancel={'[class*="MuiDialogContent-root"]'}>
+    <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
       <Paper {...props} />
     </Draggable>
   );