useSortable

分类

@Integrations

导出大小

572 B

包

@vueuse/integrations

上次更改

5 个月前

sortable 的封装器。

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

警告

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

演示

源代码在线演练 (beta)

[{"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 参数，我们也暴露了一个函数来移动项目位置。

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