[docs] 为 useDraggableDistance 添加一个完整示例

packages/.vitepress/components/DemoCard/index.vue

@@ -17,7 +17,7 @@
     <div v-if="showCode" class="text-sm b-t m-theme-border rounded-b m-(t6 x--6)">
       <ShikiMagicMove
         v-if="highlighter"
-        class="my-0 px-3 py-2"
+        class="my-0 px-3 py-2 overflow-auto"
         theme="material-theme-darker"
         :lang="codeLang"
         :highlighter="highlighter"

packages/use/src/useDraggableDistance/demo/模拟拖拽移动滚动条.preview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    ref="rootRef"
+    w-full h-40vmin b="1 solid neutral-3 dark:neutral-5" el="6 op-60" overflow-scroll
+  >
+    <div class="size-600%">
+      <n-watermark class="size-full" content="在容器内拖拽试试" :width="200" :height="100" :x-offset="60" :y-offset="30" :rotate="15" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useDraggableDistance, watchImmediate, wheneverEffectScopeImmediate, wheneverImmediate } from '@mixte/use';
+  import { useScroll } from '@vueuse/core';
+  import { reactive, ref } from 'vue';
+
+  const rootRef = ref<HTMLElement>();
+
+  const { x, y, isDragging } = useDraggableDistance(rootRef);
+
+  // 防止拖拽时选中文本 ( 按实际情况使用 )
+  wheneverImmediate(isDragging, (_, __, onCleanup) => {
+    document.body.style.userSelect = 'none';
+    onCleanup(() => {
+      document.body.style.userSelect = '';
+    });
+  });
+
+  // 拖拽后, 将本次拖拽距离加到滚动条上
+  wheneverEffectScopeImmediate(isDragging, () => {
+    const scroll = reactive(useScroll(rootRef));
+
+    scroll.measure();
+
+    const startX = scroll.x;
+    const startY = scroll.y;
+
+    watchImmediate([x, y], () => {
+      scroll.x = startX - x.value;
+      scroll.measure();
+      scroll.y = startY - y.value;
+    });
+  });
+</script>

packages/use/src/useDraggableDistance/index.md

@@ -22,3 +22,7 @@ outline: [1,3]
   const { x, y, isDragging } = useDraggableDistance(targetRef);
 </script>
 ```
+
+## 完整示例
+
+### 模拟拖拽移动滚动条