Merge pull request #4 from baozjj/feat-vitepress

feat: 文件结构调整，useDraggable优化

package.json

@@ -11,8 +11,8 @@
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
+    "docs:dev": "vitepress dev src",
+    "docs:build": "vitepress build src",
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {

docs/.vitepress/cache/deps/_metadata.json → src/.vitepress/cache/deps/_metadata.json

@@ -1,25 +1,25 @@
 {
-  "hash": "625e17f5",
-  "configHash": "3193afe9",
+  "hash": "f023f743",
+  "configHash": "9f950202",
   "lockfileHash": "dfb63b6e",
-  "browserHash": "5c3d5a6e",
+  "browserHash": "9b1005c9",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "5d6da25e",
+      "fileHash": "02ecf9aa",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "9e6d9e13",
+      "fileHash": "874af93b",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../../node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "e9e6a723",
+      "fileHash": "e153a697",
       "needsInterop": false
     }
   },

src/.vitepress/config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vitepress'
+
+const Element = [
+  { text: 'useDraggable', link: '/components/useDraggable/useDraggable.md' },
+]
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "vue compose",
+  description: "A VitePress Site",
+  themeConfig: {
+    nav: [
+      { text: '快速入门', link: '/' },
+      { text: 'API 示例', link: '/api-examples' }
+    ],
+
+    sidebar: [  
+      { text: '元素', items: Element }
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/baozjj/vueCompose' }
+    ]
+  }
+})

src/components/useDraggable/demo.vue

@@ -1,15 +1,14 @@
 <template>
   <div ref="box" class="box">
-    <div ref="dragDemo1" class='container' @click="console.log(111)">
-      <button @click="console.log(222)">按钮</button>
-      <button ref="btn" >按钮123</button>
+    <div ref="dragDemo1" class='container'>
+      {{ `x: ${Number(dragDemo1Position.x).toFixed(2)}` }}
       <br>
-      {{ `x: ${dragDemo1Position.x}` }}
-      <br>
-        {{  `y: ${dragDemo1Position.y}` }}
+      {{  `y: ${Number(dragDemo1Position.y).toFixed(2)}` }}
     </div>
   </div>
 
+  <div ref="dragDemo2" class='container' />
+
 
 </template>
 
@@ -18,8 +17,8 @@ import { onUnmounted, ref, watch } from 'vue'
 import { useDraggable } from './index'
 import type { IPosition } from './types'
 const dragDemo1 = ref<HTMLElement | null>(null)
+const dragDemo2 = ref<HTMLElement | null>(null)
 const box = ref<HTMLElement | null>(null)
-const btn = ref<HTMLElement | null>(null)
 
 const onStart = () => {
   console.log('onStart')
@@ -43,19 +42,30 @@ const { position: dragDemo1Position } = useDraggable(dragDemo1, {
   containerElement: box,
   // handle: btn
 })
+useDraggable(dragDemo2, {
+  initialValue: {
+    x: 250,
+    y: 250
+  },
+})
 
 
 </script>
 
 <style scoped lang='stylus'>
 .box 
-  margin-left: 200px;
-  margin-top: 200px;
-  width: 200px
-  height: 200px
+
+  width: 400px
+  height: 400px
   border: 1px solid red
 .container 
+  display: flex
+  justify-content: center
+  align-items: center
   width: 100px
   height: 100px
-  background: red
+  padding: 10px
+  border-radius: 5px;
+  font-size: 14px
+  background-color #fff
 </style>

src/components/useDraggable/index.ts

@@ -40,13 +40,12 @@ export const useDraggable = (
 
   const setStaticStyle = () => {
     if (!useDefaultStyles || !elementRef.value) return
-    elementRef.value!.classList.remove('use-dragging')
+    elementRef.value.classList.remove('use-dragging')
     elementRef.value.classList.add('use-draggable')
   }
 
   const setActiveStyle = () => {
     if (!useDefaultStyles || !elementRef.value) return
-    elementRef.value!.classList.remove('use-draggable')
     elementRef.value.classList.add('use-dragging')
   }
 
@@ -73,8 +72,8 @@ export const useDraggable = (
       return;
     }
 
-    draggingElement?.addEventListener('pointermove', onPointerMove, capture);
-    draggingElement?.addEventListener('pointerup', onPointerUp, capture);
+    draggingElement?.addEventListener('pointermove', onPointerMove as EventListener, capture);
+    draggingElement?.addEventListener('pointerup', onPointerUp as EventListener, capture);
   };
 
   const onPointerMove = (event: PointerEvent) => {
@@ -90,7 +89,7 @@ export const useDraggable = (
     }
 
     if (containerElement) {
-      const boundaryRect = containerElement.value.getBoundingClientRect();
+      const boundaryRect = containerElement.value!.getBoundingClientRect();
       const elementRect = elementRef.value!.getBoundingClientRect();
 
       newX = Math.max(boundaryRect.left, Math.min(boundaryRect.right - elementRect.width, newX));
@@ -111,8 +110,8 @@ export const useDraggable = (
     setStaticStyle()
 
     isDragging.value = false;  // 设置拖动结束
-    draggingElement?.removeEventListener('pointermove', onPointerMove, capture);
-    draggingElement?.removeEventListener('pointerup', onPointerUp, capture);
+    draggingElement?.removeEventListener('pointermove', onPointerMove as EventListener, capture);
+    draggingElement?.removeEventListener('pointerup', onPointerUp as EventListener, capture);
 
     if (onEnd) {
       onEnd(position.value, event);  // 调用 onEnd 回调
@@ -122,7 +121,7 @@ export const useDraggable = (
   const initPosition = () => {
     let { x, y } = position.value
     if (containerElement) {
-      const boundaryRect = containerElement.value.getBoundingClientRect();
+      const boundaryRect = containerElement.value!.getBoundingClientRect();
       const elementRect = elementRef.value!.getBoundingClientRect();
       x = Math.max(boundaryRect.left, Math.min(boundaryRect.right - elementRect.width, x));
       y = Math.max(boundaryRect.top, Math.min(boundaryRect.bottom - elementRect.height, y));
@@ -137,10 +136,16 @@ export const useDraggable = (
     handle.value!.style.cursor = 'move'
     setStaticStyle()
     initPosition()
+    if (containerElement) {
+      window.addEventListener('scroll', initPosition)
+    }
   });
 
   onUnmounted(() => {
     handle.value?.removeEventListener('pointerdown', onPointerDown, capture);  // 组件卸载时解绑 pointerdown 事件
+    if (containerElement) {
+      window.removeEventListener('scroll', initPosition)
+    }
   });
 
   return {

src/components/useDraggable/style.css

@@ -1,8 +1,10 @@
 .use-draggable {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   transition: box-shadow 0.2s ease;
+  z-index: 999;
 }
 
 .use-dragging {
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-}
+  user-select: none;
+}