useSortable

类别

@Integrations

导出体积

572 B

依赖包

@vueuse/integrations

上次更改

4 months ago

sortable 的封装。

要了解可以传递的选项的更多信息，请参阅 Sortable 文档中的 Sortable.options。

WARNING

目前，useSortable 仅实现了单个列表的拖放排序。

示例

源码 playground (beta)

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

Available in the @vueuse/integrations add-on.

安装

bash

npm i sortablejs@^1

使用方法

使用模板引用

vue

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

const el
 = useTemplateRef
<HTMLElement>('el')
const list
 = shallowRef
([{ 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>

使用指定的选择器操作

vue

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

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

const animation
 = 200

const { option
 } = useSortable
(el
, list
, {
  handle
: '.handle',
  // 或者设置 option
  // 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>

使用选择器获取根元素

vue

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

const list
 = shallowRef
([{ 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
, useSortable
 } from '@vueuse/integrations/useSortable'

useSortable
(el, list, {
  onUpdate
: (e
) => {
    // do something
    moveArrayElement
(list, e
.oldIndex
, e
.newIndex
, e
)
    // nextTick required here as moveArrayElement is executed in a microtask
    // so we need to wait until the next tick until that is finished.
    nextTick
(() => {
      /* do something */
    })
  }
})

类型声明

显示类型声明

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
: MaybeRef
<T
[]>,
  options
?: UseSortableOptions
,
): UseSortableReturn
export declare function useSortable
<T
>(
  el
: MaybeRefOrGetter
<MaybeElement
>,
  list
: MaybeRef
<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
: MaybeRef
<T
[]>,
  from
: number,
  to
: number,
  e
?: Sortable.SortableEvent
 | null,
): void