Global

Type Definitions

DSCallback(selected, eventopt) → {*}

Source:
Parameters:
Name Type Attributes Description
selected Array.<(HTMLElement|SVGElement|any)> The selected items
event MouseEvent | TouchEvent | Event <optional>
Returns:
Type:
*

DSGenericInteractionCallbackEvent(eventopt) → {*}

Source:
Parameters:
Name Type Attributes Description
event MouseEvent | TouchEvent | Event <optional>
Returns:
Type:
*

DSInteractionCallbackEvent(item) → {*}

Source:
Parameters:
Name Type Description
item HTMLElement | SVGElement | any
Returns:
Type:
*

Settings

The Settings to be passed to the Class
Properties:
Name Type Attributes Default Description
area HTMLElement | SVGElement | Document <optional>
 document area in which you can drag. If not provided it will be the whole document
autoScrollSpeed number <optional>
 1 Speed in which the area scrolls while selecting (if available). Unit is pixel per movement. Default = 1
zoom number <optional>
 1 Zoom scale factor (in case of using CSS style transform: scale() which messes with real positions). Unit scale zoom. Default = 1
callback DSCallback <optional>
 () => {} a callback function that gets fired when the element is dropped. This callback gets a property which is an array that holds all selected nodes. The second property passed is the event object.
customStyles boolean <optional>
 false if set to true, no styles (except for position absolute) will be applied by default
hoverClass string <optional>
 ds-hover the class assigned to the mouse hovered items
multiSelectMode boolean <optional>
 false Add newly selected elements to the selection instead of replacing them. Default = false
onDragMove DSGenericInteractionCallbackEvent <optional>
 ()=>{} It is fired when the user drags. This callback gets the event object. Executed before DragSelect function code ran, after getting the current mouse position.
onDragStartBegin DSGenericInteractionCallbackEvent <optional>
 ()=>{} Is fired when the user clicks in the area. This callback gets the event object. Executed *before* DragSelect function code ran.
onDragStart DSGenericInteractionCallbackEvent <optional>
 ()=>{} It is fired when the user clicks in the area. This callback gets the event object. Executed after DragSelect function code ran, before the setup of event listeners.
onElementSelect DSInteractionCallbackEvent <optional>
 ()=>{} It is fired every time an element is selected. This callback gets a property which is the just selected node
onElementUnselect DSInteractionCallbackEvent <optional>
 ()=>{} It is fired every time an element is de-selected. This callback gets a property which is the just de-selected node
selectableClass string <optional>
 ds-selectable the class assigned to the elements that can be selected
selectables Array.<HTMLElement> | Array.<SVGElement> | HTMLElement | SVGElement <optional>
 [] the elements that can be selected
selectedClass string <optional>
 ds-selected the class assigned to the selected items
selector HTMLElement <optional>
 HTMLElement the square that will draw the selection
selectorClass string <optional>
 ds-selector the class assigned to the square selector helper
multiSelectKeys Array.<string> <optional>
 ['ctrlKey', 'shiftKey', 'metaKey'] An array of keys that allows switching to the multi-select mode (see the @multiSelectMode option). The only possible values are keys that are provided via the event object. So far: ctrlKey, shiftKey, metaKey and altKey. Provide an empty array `[]` if you want to turn off the functionality.
Source:
Type:
  • Object