⬅️ Back to Table of Contents

📄 useDraggable/component

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	13
🟢 Vue Composition API	4
📐 Interfaces	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useDraggable/component.ts

📦 Imports

Name	Source
Position	@vueuse/core
RenderableComponent	@vueuse/core
UseDraggableOptions	@vueuse/core
SlotsType	vue
isClient	@vueuse/core
useDraggable	@vueuse/core
useStorage	@vueuse/core
computed	vue
defineComponent	vue
h	vue
reactive	vue
shallowRef	vue
toValue	vue

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
computed	computed	none	none
computed	computed	none	none
reactive	reactive	none	none

---

Functions

Internal helpers

Declared inside another function in this file.

onEnd(position: Position, event: PointerEvent): void

Parameters:

• position Position
• event PointerEvent

Returns: void

Calls:

• props.onEnd

Code

(position: Position, event: PointerEvent) => {
      props.onEnd?.(position, event)
      if (!storageValue)
        return
      storageValue.value.x = position.x
      storageValue.value.y = position.y
    }

---

Interfaces

UseDraggableProps

Interface Code

export interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
  /**
   * When provided, use `useStorage` to preserve element's position
   */
  storageKey?: string

  /**
   * Storage type
   *
   * @default 'local'
   */
  storageType?: 'local' | 'session'
}

Properties

Name	Type	Optional	Description
storageKey	string	✓	not shown
storageType	'local' \| 'session'	✓	not shown

---

Generated by Syntax Scribe