doc: update drag demo

Author: tangjinzhou

components/modal/demo/modal-render.vue

@@ -15,11 +15,15 @@ title:
 Custom modal content render. use `vueuse` implements draggable.
 
 </docs>
-
 <template>
   <div>
     <a-button type="primary" @click="showModal">Open Modal</a-button>
-    <a-modal ref="modalRef" v-model:visible="visible" @ok="handleOk">
+    <a-modal
+      ref="modalRef"
+      v-model:visible="visible"
+      :wrap-style="{ overflow: 'hidden' }"
+      @ok="handleOk"
+    >
       <p>Some contents...</p>
       <p>Some contents...</p>
       <p>Some contents...</p>
@@ -56,10 +60,15 @@ export default defineComponent({
     const transformY = ref(0);
     const preTransformX = ref(0);
     const preTransformY = ref(0);
+    const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
     watch([x, y], () => {
       if (!startedDrag.value) {
         startX.value = x.value;
         startY.value = y.value;
+        const bodyRect = document.body.getBoundingClientRect();
+        const titleRect = modalTitleRef.value.getBoundingClientRect();
+        dragRect.value.right = bodyRect.width - titleRect.width;
+        dragRect.value.bottom = bodyRect.height - titleRect.height;
         preTransformX.value = transformX.value;
         preTransformY.value = transformY.value;
       }
@@ -73,8 +82,14 @@ export default defineComponent({
 
     watchEffect(() => {
       if (startedDrag.value) {
-        transformX.value = preTransformX.value + x.value - startX.value;
-        transformY.value = preTransformY.value + y.value - startY.value;
+        transformX.value =
+          preTransformX.value +
+          Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
+          startX.value;
+        transformY.value =
+          preTransformY.value +
+          Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
+          startY.value;
       }
     });
     const transformStyle = computed<CSSProperties>(() => {