useSortable

类别

@集成

导出大小

486 B

包

@vueuse/integrations

最近修改

2 days ago

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 只对单个列表实现了拖放排序。

示例

源代码在线运行

a

b

c

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

Available in the @vueuse/integrations add-on.

安装

🌐 Install

npm i sortablejs@^1

用法

🌐 Usage

使用模板参考

🌐 Use template ref

<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

<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

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

返回值

🌐 Return Values

属性	描述
start	初始化 Sortable 实例（挂载时自动调用）
stop	销毁 Sortable 实例
option	在运行时获取或设置 Sortable 选项

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

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.

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