Options
All
  • Public
  • Public/Protected
  • All
Menu

组件拖拽选项

Hierarchy

  • SortableOptions

Index

Properties

Optional animation

animation: number

单位:ms,定义排序动画的时间;

Optional chosenClass

chosenClass: string

Class name for the chosen item 所选项目的类名, 格式为简单css选择器的字符串,当选中列表单元时会给该单元增加一个class 默认值 sortable-chosen

Optional component

component: ComponentBase

绑定的组件

Optional dataIdAttr

dataIdAttr: string

默认值:"data-id"

Optional delay

delay: number

定义鼠标选中列表单元可以开始拖动的延迟时间;

Optional delayOnTouchOnly

delayOnTouchOnly: boolean

Only delay if user is using touch 仅当用户使用触摸时才会延迟

Optional direction

direction: ((evt: SortableEvent, target: HTMLElement, dragEl: HTMLElement) => Direction) | "vertical" | "horizontal"

Direction of Sortable (will be detected automatically if not given) 拖拽方向 (默认情况下会自动判断方向)

Optional disabled

disabled: boolean

义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能,为false时为可以进行排序,相当于一个开关; 默认值 false

Optional dragClass

dragClass: string

正在被拖拽中的css类名 默认值 "sortable-drag"

Optional draggable

draggable: string

允许拖拽的项目类名 默认值:>* 指定元素中的哪些项目应该是可拖动的

Optional dragoverBubble

dragoverBubble: boolean

Optional dropBubble

dropBubble: boolean

Optional easing

easing: string

Easing for animation. Defaults to null. 移动动画。默认为 null。例如 https://easings.net/。

See https://easings.net/ for examples.

For other possible values, see https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

example

// CSS functions | 'steps(int, start | end)' | 'cubic-bezier(n, n, n, n)'

// CSS values | 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end' | 'initial' | 'inherit'

Optional emptyInsertThreshold

emptyInsertThreshold: number

distance mouse must be from empty sortable to insert drag element into it 距离鼠标必须从空的可排序插入拖动元素到它

Optional fallbackClass

fallbackClass: string

Class name for the cloned DOM Element when using forceFallback 使用 forceFallback 时克隆的 DOM 元素的类名

Optional fallbackOffset

fallbackOffset: { x: number; y: number }

Type declaration

  • x: number
  • y: number

Optional fallbackOnBody

fallbackOnBody: boolean

Appends the cloned DOM Element into the Document's Body 将克隆的 DOM 元素附加到文档正文中 默认值:false

Optional fallbackTolerance

fallbackTolerance: number

以像素为单位指定鼠标在被视为拖动之前应移动的距离。 默认值:0

Optional filter

filter: string | ((event: Event | TouchEvent, target: HTMLElement, sortable: Sortable) => boolean)

Selectors that do not lead to dragging (String or Function) 过滤器,不需要进行拖动的元素

Optional forceFallback

forceFallback: boolean

ignore the HTML5 DnD behaviour and force the fallback to kick in 忽略 HTML5拖拽行为,强制回调进行

Optional ghostClass

ghostClass: string

Class name for the drop placeholder 默认值:sortable-ghost 放置占位符的类名

Optional group

To drag elements from one list into another, both lists must have the same group value. You can also define whether lists can give away, give and keep a copy (clone), and receive elements. 拖拽的组

Optional handle

handle: string

Drag handle selector within list items 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的,只有按住拖动手柄才能使列表单元进行拖动 如: .drag-mc-pane

Optional ignore

ignore: string

忽略的节点tag 默认值 "a, img"

Optional invertSwap

invertSwap: boolean

Will always use inverted swap zone if set to true 默认值 false 如果设置为 true,将始终使用反转交换区域

Optional invertedSwapThreshold

invertedSwapThreshold: number

Threshold of the inverted swap zone (will be set to swapThreshold value by default) 反向交换区域的阈值 (默认情况下将设置为交换阈值)

Optional onAdd

onAdd: (event: SortableEvent) => void

Element is dropped into the list from another list 元素从一个列表拖拽到另一个列表

Type declaration

Optional onChange

onChange: (evt: SortableEvent) => void

Called when dragging element changes position 拖拽元素改变位置的时候

Type declaration

Optional onChoose

onChoose: (event: SortableEvent) => void

Element is chosen 元素被选中

Type declaration

Optional onClone

onClone: (event: SortableEvent) => void

Created a clone of an element clone一个元素的时候触发

Type declaration

Optional onEnd

onEnd: (event: SortableEvent) => void

Element dragging ended 结束拖拽

Type declaration

Optional onFilter

onFilter: (event: SortableEvent) => void

Attempt to drag a filtered element 试图拖拽一个filtered的元素

Type declaration

Optional onMove

onMove: (evt: MoveEvent, originalEvent: Event) => boolean | 1 | -1

Event when you move an item in the list or between lists 拖拽移动的时候

Type declaration

    • (evt: MoveEvent, originalEvent: Event): boolean | 1 | -1
    • Parameters

      Returns boolean | 1 | -1

Optional onRemove

onRemove: (event: SortableEvent) => void

Element is removed from the list into another list 元素从列表中移除进入另一个列表

Type declaration

Optional onSort

onSort: (event: SortableEvent) => void

Called by any change to the list (add / update / remove)

Type declaration

Optional onStart

onStart: (event: SortableEvent) => void

Element dragging started 开始拖拽的时候事件

Type declaration

Optional onUnchoose

onUnchoose: (event: SortableEvent) => void

Element is unchosen 元素未被选中的时候(从选中到未选中)

Type declaration

Optional onUpdate

onUpdate: (event: SortableEvent) => void

Changed sorting within list

Type declaration

Optional page

页面组件实例

Optional preventOnFilter

preventOnFilter: boolean

Call event.preventDefault() when triggered filter 触发 “过滤” 时调用 “事件.预防性默认 ()”

Optional removeCloneOnHide

removeCloneOnHide: boolean

Remove the clone element when it is not showing, rather than just hiding it 当克隆元素没有显示时,删除它,而不仅仅是隐藏它 默认值 true

Optional setData

setData: (dataTransfer: DataTransfer, draggedElement: HTMLElement) => void

拖拽时候的数据传输函数

Type declaration

    • (dataTransfer: DataTransfer, draggedElement: HTMLElement): void
    • Parameters

      • dataTransfer: DataTransfer
      • draggedElement: HTMLElement

      Returns void

Optional sort

sort: boolean

sorting inside list 默认值 true

Optional store

store: { get: (sortable: Sortable) => string[]; set: (sortable: Sortable) => void }

Type declaration

Optional supportPointer

supportPointer: boolean

是否支持触控

Optional swapThreshold

swapThreshold: number

Threshold of the swap zone. 默认值 1

Optional touchStartThreshold

touchStartThreshold: number

How many pixels the point should move before cancelling a delayed drag event 拖拽事件在多少像素时候取消

Generated using TypeDoc