W3cubDocs

/VueUse

useSortable

Category @Integrations

Export Size 692 B

Package @vueuse/integrations

Last Changed 2 weeks ago

Category	@Integrations
Export Size	692 B
Package	`@vueuse/integrations`
Last Changed	2 weeks ago

Wrapper for sortable.

For more information on what options can be passed, see Sortable.options in the Sortable documentation.

Available in the @vueuse/integrations add-on.

Install

npm i sortablejs

Usage

Use template ref

<script setup lang="ts">
import { useSortable } from '@vueuse/integrations/useSortable'
import { ref } from 'vue'

const el = ref<HTMLElement | null>(null)
const list = ref([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])

useSortable(el, list)
</script>

<template>
  <div ref="el">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

Use specifies the selector to operate on

<script setup lang="ts">
import { useSortable } from '@vueuse/integrations/useSortable'
import { ref } from 'vue'

const el = ref<HTMLElement | null>(null)
const list = ref([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])

useSortable(el, list, {
  handle: '.handle'
})
</script>

<template>
  <div ref="el">
    <div v-for="item in list" :key="item.id">
      <span>{{ item.name }}</span>
      <span class="handle">*</span>
    </div>
  </div>
</template>

Use a selector to get the root element

<script setup lang="ts">
import { useSortable } from '@vueuse/integrations/useSortable'
import { ref } from 'vue'

const list = ref([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])

useSortable('#dv', list)
</script>

<template>
  <div id="dv">
    <div v-for="item in list" :key="item.id">
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

Tips

If you want to handle the onUpdate yourself, you can pass in onUpdate parameters, and we also exposed a function to move the item position.

import { moveArrayElement } from '@vueuse/integrations/useSortable'

useSortable(el, list, {
  onUpdate: (e) => {
    // do something
    moveArrayElement(list.value, e.oldIndex, e.newIndex)
    // do something
  }
})

Type Declarations

export interface UseSortableReturn {
  /**
   * start sortable instance
   */
  start: () => void
  /**
   * destroy sortable instance
   */
  stop: () => void
}
export type UseSortableOptions = Options & ConfigurableDocument
export declare function useSortable<T>(
  selector: string,
  list: MaybeRefOrGetter<T[]>,
  options?: UseSortableOptions
): UseSortableReturn
export declare function useSortable<T>(
  el: MaybeRefOrGetter<HTMLElement | null | undefined>,
  list: MaybeRefOrGetter<T[]>,
  options?: UseSortableOptions
): UseSortableReturn
export declare function moveArrayElement<T>(
  list: MaybeRefOrGetter<T[]>,
  from: number,
  to: number
): void

Source

Source • Demo • Docs