Skip to content

⬅️ Back to Table of Contents

📄 useSortable

📊 Analysis Summary

Metric Count
🔧 Functions 10
📦 Imports 14
🟢 Vue Composition API 1
📐 Interfaces 2

📚 Table of Contents

🛠️ File Location:

📂 packages/integrations/useSortable/index.ts

📦 Imports

Name Source
ConfigurableDocument @vueuse/core
MaybeElement @vueuse/core
Options sortablejs
MaybeRef vue
MaybeRefOrGetter vue
defaultDocument @vueuse/core
tryOnMounted @vueuse/core
tryOnScopeDispose @vueuse/core
unrefElement @vueuse/core
Sortable sortablejs
isRef vue
nextTick vue
toValue vue
watch vue

Vue Composition API

Name Type Reactive Variables Composables
watch watch none none

Functions

useSortable(selector: string, list: MaybeRef<T[]>, options: UseSortableOptions): UseSortableReturn

Parameters:

  • selector string
  • list MaybeRef<T[]>
  • options UseSortableOptions

Returns: UseSortableReturn

Code 
export function useSortable<T>(selector: string, list: MaybeRef<T[]>,
  options?: UseSortableOptions): UseSortableReturn

insertNodeAt(parentElement: Element, element: Element, index: number): void

Inserts a element into the DOM at a given index.

Parameters:

  • parentElement any: No description
  • element any: No description
  • index number: No description

See: https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2

Raw JSDoc 
/**
 * Inserts a element into the DOM at a given index.
 * @param parentElement
 * @param element
 * @param {number} index
 * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
 */

Calls:

  • parentElement.insertBefore
Code 
export function insertNodeAt(
  parentElement: Element,
  element: Element,
  index: number,
) {
  const refElement = parentElement.children[index]
  parentElement.insertBefore(element, refElement)
}

removeNode(node: Node): void

Removes a node from the DOM.

Parameters:

  • node Node: No description

See: https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2

Raw JSDoc 
/**
 * Removes a node from the DOM.
 * @param {Node} node
 * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
 */

Calls:

  • node.parentNode.removeChild
Code 
export function removeNode(node: Node) {
  if (node.parentNode)
    node.parentNode.removeChild(node)
}

moveArrayElement(list: MaybeRef<T[]>, from: number, to: number, e: Sortable.SortableEvent | null): void

Parameters:

  • list MaybeRef<T[]>
  • from number
  • to number
  • e Sortable.SortableEvent | null

Returns: void

Calls:

  • removeNode
  • insertNodeAt
  • isRef (from vue)
  • toValue (from vue)
  • array.splice
  • nextTick (from vue)

Internal Comments: 

// When the list is a ref, make a shallow copy of it to avoid repeatedly triggering side effects when moving elements (x2)
// When list is ref, assign array to list.value

Code 
export function moveArrayElement<T>(
  list: MaybeRef<T[]>,
  from: number,
  to: number,
  e: Sortable.SortableEvent | null = null,
): void {
  if (e != null) {
    removeNode(e.item)
    insertNodeAt(e.from, e.item, from)
  }

  const _valueIsRef = isRef(list)
  // When the list is a ref, make a shallow copy of it to avoid repeatedly triggering side effects when moving elements
  const array = _valueIsRef ? [...toValue(list)] : toValue(list)

  if (to >= 0 && to < array.length) {
    const element = array.splice(from, 1)[0]
    nextTick(() => {
      array.splice(to, 0, element)
      // When list is ref, assign array to list.value
      if (_valueIsRef)
        (list as MaybeRef).value = array
    })
  }
}

Internal helpers

Declared inside another function in this file.

onUpdate(e: any): void

Parameters:

  • e any

Returns: void

Calls:

  • moveArrayElement
Code 
(e) => {
      moveArrayElement(list, e.oldIndex!, e.newIndex!, e)
    }

cleanup(): void

Returns: void

Calls:

  • sortable?.destroy
Code 
() => {
    sortable?.destroy()
    sortable = undefined
  }

initSortable(target: Element): void

Parameters:

  • target Element

Returns: void

Code 
(target: Element) => {
    if (!target || sortable !== undefined)
      return
    sortable = new Sortable(target as HTMLElement, { ...defaultOptions, ...resetOptions })
  }

start(): void

Returns: void

Calls:

  • document?.querySelector
  • unrefElement (from @vueuse/core)
  • initSortable
Code 
() => {
    const target = typeof el === 'string' ? document?.querySelector(el) : unrefElement(el)
    if (target)
      initSortable(target)
  }

option(name: K, value: Options[K]): any

Parameters:

  • name K
  • value Options[K]

Returns: any

Calls:

  • sortable?.option
Code 
<K extends keyof Options>(name: K, value?: Options[K]) => {
    if (value !== undefined)
      sortable?.option(name, value)
    else
      return sortable?.option(name)
  }

stop(): void

Returns: void

Calls:

  • cleanup
Code 
() => {
    cleanup()
  }

Interfaces

UseSortableReturn

Interface Code 
export interface UseSortableReturn {
  /**
   * start sortable instance
   */
  start: () => void
  /**
   * destroy sortable instance
   */
  stop: () => void

  /**
   * Options getter/setter
   * @param name a Sortable.Options property.
   * @param value a value.
   */
  option: (<K extends keyof Sortable.Options>(name: K, value: Sortable.Options[K]) => void) & (<K extends keyof Sortable.Options>(name: K) => Sortable.Options[K])
}

Properties

Name Type Optional Description
start () => void ✗ not shown
stop () => void ✗ not shown
option (<K extends keyof Sortable.Options>(name: K, value: Sortable.Options[K]) => v... ✗ not shown

UseSortableOptions

Interface Code 
export interface UseSortableOptions extends Options, ConfigurableDocument {
  /**
   * Watch the element reference for changes and automatically reinitialize Sortable
   * when the element changes.
   *
   * When `false` (default), Sortable is only initialized once on mount.
   * You must manually call `start()` if the element reference changes.
   *
   * When `true`, automatically watches the element reference and reinitializes
   * Sortable whenever it changes (e.g., conditional rendering with v-if).
   *
   * @default false
   */
  watchElement?: boolean
}

Properties

Name Type Optional Description
watchElement boolean ✓ not shown

Generated by Syntax Scribe