Skip to main content

Events (Pub/sub)

DragSelect follows a PubSub pattern. It will emit useful events you can subscribe to like this:

const ds = new DragSelect({});
ds.subscribe('<event_name>', (callback_object) => {})

Public Events

callback{ items, event, isDragging, dropTarget, … }Fired after the selection (i.e. on mouse-up).
dragstart{ items, event, isDragging, isDraggingKeyboard, … }Fired when the selection starts (i.e. on mouse-down).
dragmove{ items, event, isDragging, isDraggingKeyboard, … }Fired when the mouse moves while dragging (i.e. on mouse-move).
autoscroll{ items, isDragging, scroll_directions, scroll_multiplier, … }Fired when the area is auto-scrolled (i.e. cursor on a corner of the area).
elementselect{ items, item, … }Fired when an element is added to the selection.
elementunselect{ items, item, … }Fired when an element is removed from the selection.

Note: all your callbacks subscribers will run after the internal code ran. If you want to run something before everything else, use the pre prefix. I.e. predragstart is an event that runs before any internal start logic.

Note: there are way more so called "internal events" but hooking to those is not recommended since they might change in future and break your implementation.

Callback Object

The callback object is made up of different parts depending of the event. All properties are not guaranteed so it is important to check for their availability before using them. I.e. like this:

const ds = new DragSelect({});
ds.subscribe('callback', (callback_object) => {
if(callback_object.items) {
// do something with the items
eventMouseEvent | TouchEvent | KeyboardEvent | anyThe native browser event, the type is depending on the situational context
items[ HTMLElement | SVGElement | any ]Current selected elements
itemHTMLElement | SVGElement | anyThe single element currently being interacted with if any
isDraggingbooleanIf true, the user is dragging the selected elements, if false the user is selecting
isDraggingKeyboardbooleanIf true, the user is dragging the selected elements with the keyboard
scroll_directions[ 'top' | 'bottom' | 'left' | 'right' | undefined ]The direction in which the event is happening (i.e. scroll direction)
scroll_multipliernumberThe scrolling speed
  id: string,
  element: HTMLElement | SVGElement | any,
  droppables: [ HTMLElement | SVGElement | any ],
  itemsDropped: [ HTMLElement | SVGElement | any ],
  itemsInside: [ HTMLElement | SVGElement | * ]
dropZone in which the droppable elements were dropped into. id: is the identifier string of the zone. droppables: the elements that are assigned to this zone. itemsDropped: all items that were dropped on the target. itemsInside: all items that are within the bounds of the zone
keystringPressed key (lowercase)
settingsSettingsThe settings being updates/manipulated/passed, also holds the previous value. i.e. updating selectorClass will publish { settings: { selectorClass: 'newVal', 'selectorClass:pre': 'oldVal' } }

Note: all object keys are optional and might not be available, depending on the event type. So make sure to check for availability first