主题
useSortable
sortable 的封装器。
🌐 Wrapper for sortable.
有关可以传递的选项的更多信息，请参阅 Sortable 文档中的 Sortable.options 。
🌐 For more information on what options can be passed, see Sortable.options in the Sortable documentation.
WARNING
目前，useSortable 只对单个列表实现了拖放排序。
示例
Available in the @vueuse/integrations add-on.安装
🌐 Install
bash
npm i sortablejs@^1用法
🌐 Usage
使用模板参考
🌐 Use template ref
vue
<script setup lang="ts">
import { useSortable } from '@vueuse/integrations/useSortable'
import { shallowRef, useTemplateRef } from 'vue'
const el = useTemplateRef('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>use 指定要操作的选择器
🌐 Use specifies the selector to operate on
vue
<script setup lang="ts">
import { useSortable } from '@vueuse/integrations/useSortable'
import { shallowRef, useTemplateRef } from 'vue'
const el = useTemplateRef('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>使用选择器获取根元素
🌐 Use a selector to get the root element
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>使用组件
🌐 Using Component
vue
<script setup lang="ts">
import { UseSortable } from '@vueuse/integrations/useSortable/component'
import { shallowRef } from 'vue'
const list = shallowRef([
{ id: 1, name: 'a' },
{ id: 2, name: 'b' },
{ id: 3, name: 'c' },
])
</script>
<template>
<UseSortable v-model="list" as="ol" :options="{ animation: 150 }">
<li v-for="item in list" :key="item.id">
{{ item.name }}
</li>
</UseSortable>
</template>你也可以从插槽作用域访问像 start、stop 和 option 这样的辅助函数：
🌐 You can also access the helper functions like start, stop, and option from the slot scope:
vue
<template>
<UseSortable v-slot="{ stop, start }" v-model="list">
<button @click="stop()">
Stop Sorting
</button>
<button @click="start()">
Start Sorting
</button>
<div v-for="item in list" :key="item.id">
{{ item.name }}
</div>
</UseSortable>
</template>返回值
🌐 Return Values
| 属性 | 描述 |
|---|---|
start | 初始化 Sortable 实例（在挂载时自动调用） |
stop | 销毁 Sortable 实例 |
option | 在运行时获取或设置 Sortable 选项 |
ts
const { start, stop, option } = useSortable(el, list)
// Stop sorting
stop()
// Start sorting again
start()
// Get/set options
option('animation', 200) // set
const animation = option('animation') // getjs
'use strict'
const { start, stop, option } = useSortable(el, list)
// Stop sorting
stop()
// Start sorting again
start()
// Get/set options
option('animation', 200) // set
const animation = option('animation') // get查看元素变化
🌐 Watch Element Changes
使用 watchElement 选项可以在元素变化时自动重新初始化 Sortable（与 v-if 一起使用时很有用）。
🌐 Use the watchElement option to automatically reinitialize Sortable when the element changes (useful with v-if).
ts
import { useSortable } from '@vueuse/integrations/useSortable'
useSortable(el, list, {
watchElement: true, // auto-reinitialize when element changes
})自定义更新处理程序
🌐 Custom Update Handler
如果你想自己处理 onUpdate，可以传入 onUpdate 参数，我们还提供了一个函数来移动项目位置。
🌐 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.
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 */
})
}
})辅助函数
🌐 Helper Functions
以下辅助函数也被导出：
🌐 The following helper functions are also exported:
| 功能 | 描述 |
|---|---|
moveArrayElement(list, from, to, event?) | 将数组中的元素从一个索引移动到另一个索引 |
insertNodeAt(parent, element, index) | 在特定索引插入一个 DOM 节点 |
removeNode(node) | 从父节点中移除一个 DOM 节点 |