import Collidable from '@shopify/draggable/src/Plugins/Collidable/Collidable.js'

public class | source

Collidable

Extends:

* → Collidable

Collidable plugin which detects colliding elements while dragging

Constructor Summary

Public Constructor
public	constructor(draggable: Draggable) Collidable constructor.

Member Summary

Public Members
public	currentAnimationFrame: Number \| null Animation frame for finding colliding elements
public	currentlyCollidingElement: HTMLElement \| null Keeps track of currently colliding elements
public	lastCollidingElement: HTMLElement \| null Keeps track of currently colliding elements

Method Summary

Public Methods
public	attach() Attaches plugins event listeners
public	detach() Detaches plugins event listeners
public	getCollidables(): HTMLElement[] Returns current collidables based on `collidables` option

Private Methods
private	[onDragMove](event: DragMoveEvent) Drag move handler
private	[onDragStop](event: DragStopEvent) Drag stop handler
private	[onRequestAnimationFrame](target: HTMLElement): Function Animation frame function

Public Constructors

public constructor(draggable: Draggable) source

Collidable constructor.

Params:

Name	Type	Attribute	Description
draggable	Draggable		Draggable instance

Public Members

public currentAnimationFrame: Number | null source

Animation frame for finding colliding elements

Properties:

Name	Type	Attribute	Description
currentAnimationFrame	Number \| null

public currentlyCollidingElement: HTMLElement | null source

Keeps track of currently colliding elements

Properties:

Name	Type	Attribute	Description
currentlyCollidingElement	HTMLElement \| null

public lastCollidingElement: HTMLElement | null source

Keeps track of currently colliding elements

Properties:

Name	Type	Attribute	Description
lastCollidingElement	HTMLElement \| null

Public Methods

public attach() source

Attaches plugins event listeners

public detach() source

Detaches plugins event listeners

public getCollidables(): HTMLElement[] source

Returns current collidables based on collidables option

Return:

HTMLElement[]

Private Methods

private [onDragMove](event: DragMoveEvent) source

Drag move handler

Params:

Name	Type	Attribute	Description
event	DragMoveEvent		Drag move event

private [onDragStop](event: DragStopEvent) source

Drag stop handler

Params:

Name	Type	Attribute	Description
event	DragStopEvent		Drag stop event

private [onRequestAnimationFrame](target: HTMLElement): Function source

Animation frame function

Params:

Name	Type	Attribute	Description
target	HTMLElement		Current move target

Return:

Function