Global

Type Definitions

CallbackObject

The Object that is passed back to any callback method
Properties:
Name Type Attributes Description
items Array.<(HTMLElement|SVGElement|any)> <optional>
 The items currently selected
event MouseEvent | TouchEvent | KeyboardEvent | Event <optional>
 The respective event object
item HTMLElement | SVGElement | any <optional>
 The single item currently interacted with
isDragging boolean <optional>
 Whether the interaction is a drag or a select
isDraggingKeyboard boolean <optional>
 Whether or not the drag interaction is via keyboard
key string <optional>
 Pressed key (lowercase)
scroll_directions Array.<('top'|'bottom'|'left'|'right'|undefined)> <optional>
scroll_multiplier number <optional>
Source:
Type:
  • Object

DSArea

area within which you can drag
Source:
Type:
  • HTMLElement | SVGElement | HTMLDocument

DSBoundingRect

Source:
Type:
  • Object

DSCallback(data)

Source:
Parameters:
Name Type Description
data CallbackObject

DSCallbackNames

the name of the callback
Source:
Type:

DSDragKeys

Source:
Type:
  • Object

DSEdges

Source:
Type:
  • Array.<('top'|'bottom'|'left'|'right'|undefined)>

DSElement

a single element that can be selected
Source:
Type:
  • HTMLElement | SVGElement

DSElementPos

Source:
Type:
  • Object

DSElements

the elements that can be selected
Source:
Type:
  • Array.<(HTMLElement|SVGElement)>

DSEvent

en event from a touch or mouse interaction
Source:
Type:
  • MouseEvent | TouchEvent

DSEventNames

Source:
Type:
  • 'dragmove' | 'autoscroll' | 'dragstart' | 'elementselect' | 'elementunselect' | 'callback'

DSInputElements

the elements that can be selected
Source:
Type:
  • Array.<(HTMLElement|SVGElement)> | HTMLElement | SVGElement

DSInternalEventNames

Source:
Type:
  • 'Interaction:init' | 'Interaction:start' | 'Interaction:end' | 'Interaction:update' | 'Area:modified' | 'Area:scroll' | 'PointerStore:updated' | 'Selected:added' | 'Selected:removed' | 'Selectable:click' | 'Selectable:pointer' | 'KeyStore:down' | 'KeyStore:up'

DSInternalEventNamesPre

Source:
Type:
  • 'Interaction:init:pre' | 'Interaction:start:pre' | 'Interaction:end:pre' | 'Interaction:update:pre' | 'Area:modified:pre' | 'Area:scroll:pre' | 'PointerStore:updated:pre' | 'Selected:added:pre' | 'Selected:removed:pre' | 'Selectable:click:pre' | 'Selectable:pointer:pre' | 'KeyStore:down:pre' | 'KeyStore:up:pre' | 'Drag:keyboardDrag:pre'

DSModificationCallback(event)

Source:
Parameters:
Name Type Description
event *

DSMultiSelectKeys

An array of keys that allows switching to the multi-select mode
Source:
Type:
  • Array.<('Shift'|'Control'|'Meta'|string)>

DSSelectorArea

area in which you can drag
Source:
Type:
  • HTMLElement

Settings

The Settings to be passed to the Class
Properties:
Name Type Attributes Default Description
area HTMLElement | SVGElement | HTMLDocument <optional>
 document area in which you can drag. If not provided it will be the whole document
selectables DSInputElements <optional>
 [] the elements that can be selected
autoScrollSpeed number <optional>
 5 Speed in which the area scrolls while selecting (if available). Unit is pixel per movement.
overflowTolerance Vect2 <optional>
 {x:25,y:25} Tolerance for autoScroll (how close one has to be near an edges for autoScroll to start)
zoom number <optional>
 1 Zoom scale factor (in case of using CSS style transform: scale() which messes with real positions). Unit scale zoom.
customStyles boolean <optional>
 false if set to true, no styles (except for position absolute) will be applied by default
multiSelectMode boolean <optional>
 false Add newly selected elements to the selection instead of replacing them
multiSelectToggling boolean <optional>
 true Whether or not to toggle already active elements while multi-selecting
multiSelectKeys DSMultiSelectKeys <optional>
 ['Control', 'Shift', 'Meta'] Keys that allows switching to the multi-select mode (see the multiSelectMode option). Any key value is possible ([see MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)). Note that the best support is given for Control, Shift and Meta. Provide an empty array `[]` if you want to turn off the functionality.
selector HTMLElement <optional>
 HTMLElement the square that will draw the selection
draggability boolean <optional>
 true When a user is dragging on an already selected element, the selection is dragged.
immediateDrag boolean <optional>
 true Whether an element is draggable from the start or needs to be selected first
keyboardDrag boolean <optional>
 true Whether or not the user can drag with the keyboard (we don't recommend disabling it)
dragKeys DSDragKeys <optional>
 {up:['ArrowUp'],down:['ArrowDown'],left:['ArrowLeft'],righ:['ArrowRight']} The keys available to drag element using the keyboard.
keyboardDragSpeed number <optional>
 10 The speed at which elements are dragged using the keyboard. In pixels per keydown.
useTransform boolean <optional>
 true Whether to use hardware accelerated css transforms when dragging or top/left instead
hoverClass string <optional>
 ds-hover the class assigned to the mouse hovered items
selectableClass string <optional>
 ds-selectable the class assigned to the elements that can be selected
selectedClass string <optional>
 ds-selected the class assigned to the selected items
selectorClass string <optional>
 ds-selector the class assigned to the square selector helper
selectorAreaClass string <optional>
 ds-selector-area the class assigned to the square in which the selector resides. By default it's invisible
callback DSCallback <optional>
 Deprecated: please use DragSelect.subscribe('callback', callback) instead
onDragMove DSCallback <optional>
 Deprecated: please use DragSelect.subscribe('onDragMove', onDragMove) instead
onDragStartBegin DSCallback <optional>
 Deprecated: please use DragSelect.subscribe('onDragStartBegin', onDragStartBegin) instead
onDragStart DSCallback <optional>
 Deprecated: please use DragSelect.subscribe('onDragStart', onDragStart) instead
onElementSelect DSCallback <optional>
 Deprecated: please use DragSelect.subscribe('onElementSelect', onElementSelect) instead
onElementUnselect DSCallback <optional>
 Deprecated: please use DragSelect.subscribe('onElementUnselect', onElementUnselect) instead
Source:
Type:
  • Object

Vect2

Source:
Type:
  • Object