Ƭ CollisionData: Object

Type declaration

Name	Type
`el?`	`HTMLElement`
`x1`	`number`
`x2`	`number`
`y1`	`number`
`y2`	`number`

CollisionDetectorOptions

Ƭ CollisionDetectorOptions: Object

Type declaration

Name	Type
`container?`	`Element`

DraggableOptions

Ƭ DraggableOptions: Object

Type declaration

Name	Type	Description
`classes?`	`string`	拖动时应用的class样式，多个使用空格分开
`container?`	`boolean`	限制活动范围，默认false
`cursor?`	{ `active?`: `string` ; `default?`: `string` ; `over?`: `string` }	可定义拖动时不同状态下的指针，默认move
`cursor.active?`	`string`	-
`cursor.default?`	`string`	-
`cursor.over?`	`string`	-
`cursorAt?`	{ `left`: `number` \| `string` ; `top`: `number` \| `string` }	拖动时元素左上角距离指针的距离，支持百分比及负数
`cursorAt.left`	`number` \| `string`	-
`cursorAt.top`	`number` \| `string`	-
`direction?`	`"v"` \| `"h"`	传递v/h可实现单向拖动。默认''
`droppable?`	() => `NodeList` \| `HTMLCollection` \| `HTMLElement` \| `string` \| `HTMLElement` \| `HTMLElement`	拖动目标，dom/selector数组，用于拖动交互事件
`filter?`	`string`	禁止触发元素的css选择器
`ghost?`	(`el`: `HTMLElement`) => `HTMLElement` \| `boolean`	开启ghost模式后，拖动元素时会自动创建元素副本并拖动副本，当拖动结束后，副本销毁并且元素移动到最后位置。默认false，支持函数返回副本元素
`ghostClass?`	`string`	-
`grid?`	`number` \| `number`	网格拖动模式，每次移动指定的网格大小。数字或数字数组
`group?`	`string`	可将不同的拖动元素编为一组，拖动时会自动管理zIndex
`handle?`	`string`	实际响应拖动的元素选择器，字符串
`onClone?`	(`cloneDom`: `HTMLElement`, `ev`: `MouseEvent`) => `void`	-
`onDrag?`	(`dragDom`: `HTMLElement`, `ev`: `MouseEvent`, `offsetX`: `number`, `offsetY`: `number`, `x`: `number`, `y`: `number`) => `boolean` \| `void`	拖动中调用，返回false阻止dom移动
`onEnd?`	(`dragDom`: `HTMLElement`, `ev`: `MouseEvent`) => `boolean` \| `void`	拖动结束后调用，返回false阻止ghost模式下的dom移动
`onSnap?`	(`el`: `HTMLElement`, `targetH`: `HTMLElement`, `targetV`: `HTMLElement`, `hDir`: `string`, `vDir`: `string`) => `void`	-
`onStart?`	(`dragDom`: `HTMLElement`, `ev`: `MouseEvent`) => `void`	-
`scroll?`	`boolean`	是否在鼠标到达容器边缘时自动滚动，默认true
`scrollSpeed?`	`number`	滚动速度，默认10
`snap?`	`string`	拖动元素可自动吸附的目标元素选择器。字符串
`snapOptions?`	{ `tolerance`: `number` }	-
`snapOptions.tolerance`	`number`	吸附元素的移动误差，默认10
`threshold?`	`number`	拖动起始阈值，默认0
`type?`	`string`	拖动类型标识，用于droppable识别交互类型
`zIndex?`	`number`	拖动时元素的zIndex

DroppableOptions

Ƭ DroppableOptions: Object

Type declaration

Name	Type	Description
`accepts?`	(`ele`: `HTMLElement`, `draggable`: `HTMLElement`) => `boolean` \| `string`	定义哪些draggable元素进行交互。如果是字符串，支持不同Draggable对象进行编组
`activeClass?`	`string`	当accepts的draggable对象开始拖动时，自动设置该样式。多个样式使用空格分隔
`hoverClass?`	`string`	当accepts的draggable对象拖动到droppable元素上时，自动设置该样式。多个样式使用空格分隔
`onActive?`	(`draggable`: `HTMLElement`, `ele`: `HTMLElement`) => `void`	当accepts的draggable对象开始拖动时触发
`onDeactive?`	(`draggable`: `HTMLElement`, `ele`: `HTMLElement`) => `void`	当accepts的draggable对象结束拖动时触发
`onDrop?`	(`el`: `HTMLElement`, `ev`: `MouseEvent`) => `void`	-
`onEnter?`	(`el`: `HTMLElement`, `ev`: `MouseEvent`) => `void`	-
`onLeave?`	(`el`: `HTMLElement`, `ev`: `MouseEvent`) => `void`	-
`onOver?`	(`el`: `HTMLElement`, `ev`: `MouseEvent`) => `void`	-

ResizableOptions

Ƭ ResizableOptions: Object

Type declaration

Name	Type	Description
`aspectRatio?`	`number`	宽高比，小数
`dir?`	`string`	resizable方向，默认n,s,e,w,ne,nw,se,sw
`ghost?`	`boolean` \| `Function`	开启ghost模式后，拖动元素时会自动创建元素副本并拖动副本，当拖动结束后，副本销毁并且元素移动到最后位置。默认false
`ghostClass?`	`string`	-
`handleSize?`	`number`	handle的宽高，默认8
`maxSize?`	`number` \| `number`	拖动元素的最大size，如果是数组，表示 width,height
`minSize?`	`number` \| `number`	拖动元素的最小size，如果是数组，表示 width,height
`offset?`	`number`	handle所在元素的位置偏移，负数向内，正数向外。默认0
`onClone?`	(`cloneDom`: `HTMLElement`, `ev`: `MouseEvent`) => `void`	-
`onEnd?`	(`w`: `number`, `h`: `number`) => `void`	-
`onResize?`	(`w`: `number`, `h`: `number`) => `void`	-
`onStart?`	(`w`: `number`, `h`: `number`) => `void`	-

RotatableOptions

Ƭ RotatableOptions: Object

Type declaration

Name	Type	Description
`cursor?`	{ `active?`: `string` ; `default?`: `string` }	可定义拖动时不同状态下的指针，默认crosshair
`cursor.active?`	`string`	-
`cursor.default?`	`string`	-
`onEnd?`	(`deg`: `number`) => {}	-
`onRotate?`	(`deg`: `number`) => {}	-
`onStart?`	(`deg`: `number`) => {}	-

SelectableOptions

Ƭ SelectableOptions: Object

Type declaration

Name	Type	Description
`class?`	`string`	选择器样式字符串，多个使用空格分隔
`filter?`	(`el`: `HTMLElement`) => `boolean` \| `string`	禁止触发元素的css选择器或校验函数，函数返回true表示需要过滤
`mode?`	`"overlap"` \| `"inclusion"`	选择模式，默认overlap
`onEnd?`	(`selection`: `HTMLElement`) => `void`	-
`onSelect?`	(`selection`: `HTMLElement`) => `void`	-
`onStart?`	(`target`: `HTMLElement`) => `void`	-
`scroll?`	`boolean`	是否在鼠标到达容器边缘时自动滚动，默认true
`scrollSpeed?`	`number`	滚动速度，默认10
`selectedClass?`	`string`	选择器拖动结束后，被选中元素应用的样式字符串，多个使用空格分隔
`selectingClass?`	`string`	选择器拖动进行中，被选中元素应用的样式字符串，多个使用空格分隔
`targets?`	() => `NodeList` \| `HTMLCollection` \| `HTMLElement` \| `string`	容器中可选择的元素。可以是选择器字符串或返回元素数组的函数

SplittableOptions

Ƭ SplittableOptions: Object

Type declaration

Name	Type	Description
`ghost?`	`boolean`	开启ghost模式后，拖动元素时会自动创建元素副本并拖动副本，当拖动结束后，副本销毁且元素移动到最后位置。默认false
`ghostClass?`	`string`	-
`handle?`	`string`	自定义handle选择器，多个使用空格分隔。handle元素可以是与分割元素平级或在分割元素内
`handleSize?`	`number`	handle宽/高，默认10
`inside?`	`boolean`	自动创建的handle是否在元素内部插入，默认false
`minSize?`	`number` \| `number`	最小区域，如果是数组可以按顺序定义分割区域，默认0
`onClone?`	(`cloneDom`: `HTMLElement`, `ev`: `MouseEvent`) => `void`	-
`onEnd?`	(`size1`: `number`, `size2`: `number`) => `void`	-
`onSplit?`	(`size1`: `number`, `size2`: `number`) => `void`	-
`onStart?`	(`size1`: `number`, `size2`: `number`) => `void`	-
`onSticky?`	(`size1`: `number`, `size2`: `number`, `position`: `"start"` \| `"end"` \| `"none"`) => `void`	-
`oneSideMode?`	`"start"` \| `"end"`	单边模式，只修改单侧元素size，用于flex布局。可选值为 start/end
`sticky?`	`boolean` \| `boolean`	粘性吸附，如果是数组可以按顺序定义分割区域。设置minSize后生效

Variables

VERSION

• Const VERSION: string = packageInfo.version

default

• default: Object

Type declaration

Name	Type
`VERSION`	`string`
`newDraggable`	(`els`: `string` \| `HTMLElement` \| (`string` \| `HTMLElement`), `opts?`: `DraggableOptions`) => `Draggable`
`newDroppable`	(`els`: `string` \| `HTMLElement` \| (`string` \| `HTMLElement`), `opts?`: `DroppableOptions`) => `Droppable`
`newResizable`	(`els`: `string` \| `HTMLElement`, `opts?`: `ResizableOptions`) => `Resizable`
`newRotatable`	(`els`: `string` \| `HTMLElement`, `opts?`: `RotatableOptions`) => `Rotatable`
`newSelectable`	(`container`: `string` \| `HTMLElement`, `opts?`: `SelectableOptions`) => `Selectable`
`newSplittable`	(`container`: `string` \| `HTMLElement`, `opts?`: `SplittableOptions`) => `Splittable`

Functions

newCollisionDetector

▸ newCollisionDetector(el, targets, opts?): CollisionDetector

create a detector for the el and return

Parameters

Name	Type	Description
`el`	`string` \| `HTMLElement`	element to be detected
`targets`	`string` \| `HTMLElement` \| `HTMLElement` \| `NodeList` \| `HTMLCollection` \| () => `HTMLElement`
`opts?`	`CollisionDetectorOptions`	CollisionDetectorOptions