跳到主要内容

useSortable

分类
导出大小
572 B
@vueuse/integrations
上次更改
5 个月前

sortable 的封装器。

有关可传递选项的更多信息,请参阅 Sortable 文档中的 Sortable.options

警告

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

演示

a
b
c
[{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c"}]
可在 @vueuse/integrations 插件中使用。

安装

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',
// or option set // animation }) // You can use the option method to set and get the option of 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 参数,我们也暴露了一个函数来移动项目位置。

ts
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 */ }) } })

类型声明

显示类型声明
ts
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
])
} 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

来源

源代码演示文档

贡献者

Anthony Fu
IlyaL
丶远方
Anthony Fu
IlyaL
James Garbutt
Michael Cozzolino
Doctorwu
Vida Xie
SerKo
Yu Lia
Robin
Robin
David Gonzalez
泰科
George Kinsman

更新日志

d5bcd - fix(integrations): use relative import in component.ts (#5025)
8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v13.3.0
16692 - 修复: 修复类型不匹配 (#4760)
v13.1.0
15917 - 功能: 添加使用组件引用 (#4684) 的可能性
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v11.3.0
9e78e - 修复: 元素顺序错误 (#4332)
v10.8.0
a086e - fix: 更严格的类型
v10.6.0
d9846 - 修复: 防止创建多个实例 (#3501)
v10.4.0
b8515 - 修复: 修复 moveArrayElement 反复触发副作用 (#3322)
v10.2.0
14283 - 功能: 添加选项设置获取方法 (#3108)

根据 MIT 许可证发布。