business-draggable

拖拽排序插件

源码地址

在线演示

https://codesandbox.io/s/businessdraggable-74zlf

基本用法

new Draggable.SortDraggable({
container: '#app',
});

可用接口

export interface IStaticDataSourceParams {
titleText?: string;
contentText?: string;
};

可配置项

Key

Value

Require

Description

container

HTMLElement

true

挂载容器

dataSource

IStaticDataSourceParams

false

源数据

animate

boolean

false

是否开启过渡效果

dragWrapperStyle

Partial\

false

拖拽外部容器的样式

dragOriginStyle

Partial\

false

拖拽对象的初始样式

dragOriginActiveStyle

Partial\

false

拖拽该对象时的样式

dragTargetActiveStyle

Partial\

false

拖拽时目标对象的样式

onDragStartHook

(origin: HTMLElement) => void

false

开始拖拽时的钩子

onDragEnterHook

(origin: HTMLElement, target: HTMLElement) => void

false

拖拽进入目标时的钩子

onDragLeaveHook

(origin: HTMLElement, target: HTMLElement) => void

false

拖拽离开目标时的钩子

onDragOverHook

(origin: HTMLElement, target: HTMLElement) => void

false

在目标对象上持续拖拽时的钩子

onDropHook

(origin: HTMLElement) => void

false

放置拖拽对象时的钩子

问题记录

Q: 关于draggable的事件触发时机?

A: source(ondragstartondragondragend), target(ondragenterondragoverondragleaveondrop)

Q: ondrop事件无法触发?

A: ondragover必须进行e.preventDefault()

Q: 父元素设置draggable, 子元素会触发drag事件

A: 给所有子元素添加pointer-events: none