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(ondragstart、ondrag、ondragend), target(ondragenter、ondragover、ondragleave、ondrop)
Q:
ondrop事件无法触发?
A: ondragover必须进行e.preventDefault()
Q: 父元素设置
draggable, 子元素会触发drag事件
A: 给所有子元素添加pointer-events: none
