useSortable

Category

@Integrations

Export Size

720 B

Package

@vueuse/integrations

Last Changed

yesterday

sortable 的封装。

关于可传递的选项的更多信息，请参见 Sortable 文档中的 Sortable.options。

Demo

source

a

b

c

[{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c"}]

Available in the @vueuse/integrations add-on.

安装

npm i sortablejs@^1

使用方法

使用模板引用

<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>

使用指定选择器进行操作

<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' }])

const animation = 200

const { option } = useSortable(el, list, {
  handle: '.handle',
  // 或设置选项
  // animation
})

// 你可以使用 option 方法来设置和获取 Sortable 的选项
option('animation', animation)
// option('animation') // 200
</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>

使用选择器获取根元素

<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>

提示

如果你想自己处理 onUpdate，你可以传入 onUpdate 参数，我们也提供了一个移动项目位置的函数。

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

useSortable(el, list, {
  onUpdate: (e) => {
    // 执行某些操作
    moveArrayElement(list.value, e.oldIndex, e.newIndex, e)
    // 这里需要 nextTick，因为 moveArrayElement 在微任务中执行
    // 所以我们需要等到下一个 tick 直到完成
    nextTick(() => {
      /* 执行某些操作 */
    })
  }
})

类型声明

显示类型声明

export interface UseSortableReturn {
  /**
   * 启动可排序实例
   */
  start: () => void
  /**
   * 销毁可排序实例
   */
  stop: () => void
  /**
   * 选项的获取器/设置器
   * @param name Sortable.Options 的属性名称。
   * @param value 一个值。
   */
  option: (<K extends keyof Sortable.Options>(
    name: K,
    value: Sortable.Options[K],
  ) => void) &
    (<K extends keyof Sortable.Options>(name: K) => Sortable.Options[K])
}
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
/**
 * 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
 */
export declare function insertNodeAt(
  parentElement: Element,
  element: Element,
  index: number,
): void
/**
 * 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
 */
export declare function removeNode(node: Node): void
export declare function moveArrayElement<T>(
  list: MaybeRefOrGetter<T[]>,
  from: number,
  to: number,
  e?: Sortable.SortableEvent | null,
): void

Source

Source • Demo • Docs

贡献者

远方os

Anthony Fu

Doctorwu

David Gonzalez

Anthony Fu

Tycho

George Kinsman

变更日志

v10.8.0 on 2/20/2024

a086e - fix: stricter types

v10.6.0 on 11/9/2023

d9846 - fix: prevent from creating multi instances (#3501)

v10.4.0 on 8/25/2023

b8515 - fix: fixed moveArrayElement repeatedly triggering side effects (#3322)

v10.2.0 on 6/16/2023

14283 - feat: add option set get method (#3108)

v10.0.0-beta.4 on 4/13/2023

4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter

0a72b - feat(toValue): rename resolveUnref to toValue

v10.0.0-beta.3 on 4/12/2023

3a508 - fix: order of dom and array is different (#2926)

v10.0.0-beta.0 on 3/14/2023

6bc60 - feat: new function (#2763)