Methods

DragSelect exposes some useful methods. When the function is saved into a variable const ds = new DragSelect() you have access to all its inner functions. You can simply use them like this:

const ds = new DragSelect({});
ds.methodName(method_props);

Methods

Functionality

method	properties	usage
stop	/	Will teardown/stop the whole functionality
start	/	Reset the functionality after a stop/teardown
break	/	Utility to override DragSelect internal functionality. Breaks out of current flow. Read Custom Drag and Drop for more info.

Pub/Sub

method	properties	usage
subscribe	(event_name, callback:(callback_object) => void):number	Subscribes to an event, see the Events API for infos on the names and callback_object.
unsubscribe	(event_name, callback, id)	Unsubscribes from an event, either pass the exact same callback method as when subscribing or the ID which is returned from the subscribe method
publish	(event_name, callback_object:any)	Publishes an event, see the Events API for infos on the names and callback_object.

Read the Events API for more information

Settings

method	properties	usage
setSettings	Settings	Update any setting dynamically, see Updating Settings

Interaction

method	properties	usage
isDragging	/	Whether the user is currently drag n dropping elements (instead of selection)
isMultiSelect	event:KeyboardEvent	MouseEvent

Selection

method	properties	usage
getSelection	/	Returns all currently selected nodes
addSelection	elements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:boolean, dontAddToSelectables:boolean	adds one or multiple elements to the selection. If boolean is set to true: callback will be called afterwards. Adds them to the selectables if they're not yet in the set (can be turned off by setting the last boolean to true)
removeSelection	elements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:boolean, removeFromSelectables:boolean	removes one or multiple elements to the selection. If boolean is set to true: callback will be called afterwards. If last boolean is set to true, it also removes them from the possible selectable nodes if they were.
toggleSelection	elements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:boolean, removeFromSelectables:boolean	toggles one or multiple elements to the selection. If element is not in selection it will be added, if it is already selected, it will be removed. If triggerCallback is set to true: callback will be called afterward. If removeFromSelectables is set to true: will NOT add elements to the list of selectable elements but will remove elements from the selectables if they are toggled off. (By default the toggling will add elements to the list of selectables and will not remove them).
setSelection	elements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:boolean, dontAddToSelectables:boolean	sets the selection to one or multiple elements. If boolean is set to true: callback will be called afterwards. Adds them to the selectables if they're not yet in the set (can be turned off by setting the last boolean to true)
clearSelection	elements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:boolean	Removes all elements from the selection. If callback is set to true: callback will be called afterwards.
clearSelection	triggerCallback:boolean	Unselect / Deselect all current selected Nodes

Selectables

method	properties	usage
addSelectables	elements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, addToSelection:boolean	Adds elements that can be selected. Don’t worry, nodes are never added twice. addToSelection: elements will also be added to current selection.
removeSelectables	elements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, removeFromSelection:boolean	Remove elements from the set of elements that can be selected. removeFromSelection: elements will also be removed from current selection.
getSelectables	/	Returns array with all nodes that can be selected.

Pointer

method	properties	usage
getInitialCursorPosition	/	Returns the registered x, y coordinates the cursor had when first clicked
getCurrentCursorPosition	/	Returns current x, y coordinates of the cursor
getPreviousCursorPosition	/	Returns last registered x, y coordinates of the cursor (after last end callback)
getInitialCursorPositionArea	/	Returns the registered x, y coordinates relative to the area the cursor had when first clicked
getCurrentCursorPositionArea	/	Returns current x, y coordinates of the cursor relative to the area
getPreviousCursorPositionArea	/	Returns last registered x, y coordinates of the cursor relative to the area (after last end callback)

DropZones

method	properties	usage
getZoneByCoordinates	coordinates:{ x:number, y:number } (Optional)	Returns the first drop target under the current mouse position, or, if provided at the coordinates.
getItemsDroppedByZoneId	zoneId:string	Returns the items dropped into a specific zone (by zone.id)
getItemsInsideByZoneId	zoneId:string, addClasses:boolean	Returns the items that are visually inside a specific zone (by zone.id). addClasses: also add the respective CSS classes to those elements if they don’t have them yet.

Example

const ds = new DragSelect({});
ds.setSettings({ selectables: document.querySelectorAll('.selectable') });
ds.getSelection();