Skip to main content


aka Constructor Properties aka Properties aka options.

const ds = new DragSelect({
selectables: document.querySelectorAll('.selectable'),

DragSelect is hyper customizable: all properties are optional, you can totally just pass an empty object and set the settings later. See updating-settings


selectables[HTMLElement | SVGElement] | HTMLElement | SVGElement[]The elements that can be selected
areaHTMLElement | SVGElement | DocumentdocumentThe square in which you are able to select the elements
selectorHTMLElementIs Auto-CreatedThe square that will be used to draw the selection.
selectionThresholdnumber0How much % of the element has to be selected to be considered selected (0 = just touching, 1 = fully inside the selection)
multiSelectModebooleanfalseAdd newly selected elements to the selection instead of replacing them
multiSelectTogglingbooleantrueWhether or not to toggle already active elements while multi-selecting (default mimics MacOS behavior)
multiSelectKeys['Shift'|'Control'|'Meta'|string]['Control', 'Shift', 'Meta']Keys for multi-selection. Any key value is possible (see MDN docs). The best support is given for Control, Shift and Meta. Provide an empty array [] if you want to turn off the functionality.


autoScrollSpeednumber5The speed in which the area scrolls while selecting (if available). The unit is arbitrary (aims for 30fps). Set to 0.0001 to disable auto-scrolling
overflowTolerance{ x:number, y:number }{ x: 25, y: 25 }Tolerance for autoScroll (how close one has to be near an edges for autoScroll to start)


draggabilitybooleantrueWhen a user is dragging on an already selected element, the selection is dragged.
useTransformbooleantrueWhether to use the more performant hardware accelerated css transforms when dragging instead of the top/left positions.
immediateDragbooleantrueWhether a selectable element is draggable before being selected or needs to be selected first
keyboardDragbooleantrueWhether or not the user can drag with the keyboard (Accessibility).
dragAsBlockbooleanfalseWhether to drag multiple elements as a single block or as individual items.
dragKeys{ up:string[], down:string[], left:string[], right:string[] }{ up:['ArrowUp'], down: ['ArrowDown'], left: ['ArrowLeft'], right: ['ArrowRight'] }The keys available to drag element using the keyboard. Any key value is possible (see MDN docs).
keyboardDragSpeednumber10The speed at which elements are dragged using the keyboard. In pixels per keyDown.


dropZones[{ id:string, element:HTMLElement, droppables?: [HTMLElement | SVGElement] | HTMLElement | SVGElement }][]Zones with association of droppable items that can be dropped into them. id: any unique identifying string. element: is the dropzone itself. droppables: the elements that can be dropped into that zone. This is optional, by default it is all selectables
dropInsideThresholdnumber1How much % of the item has to be inside the dropzone to be considered inside (0 = barely touching, 1 = completely inside)
dropTargetThresholdnumber0How much % of the zone does the pointer has to be in to be considered a target (0 = anywhere in the zone, max: 0.5 = has to point at the center of the zone)


customStylesbooleanfalseIf true, no styles will be automatically applied to the selector element (except position: absolute)
selectedClassstringds-selectedThe class name assigned to the selected items.
hoverClassstringds-hoverThe class name assigned to the mouse hovered items.
selectorClassstringds-selectorThe class name assigned to the square selector helper.
selectableClassstringds-selectableThe class name assigned to the elements that can be selected.
selectorAreaClassstringds-selector-areaThe class assigned to the square in which the selector resides. By default it's invisible
droppedTargetClassstringds-dropped-target & ds-dropped-target-${}On an item corresponding the target dropzone. This is also the prefix for ds-dropped-target-${}.
droppedInsideClassstringds-dropped-inside & ds-dropped-inside-${}On an item that is within its dropzone bounds after a drop. This is also the prefix for ds-dropped-inside-${}
droppableClassstringds-droppable & ds-droppable-${}On element that can be dropped into at least one container. This is also the prefix for ds-droppable-${}
dropZoneClassstringds-dropzoneOn each dropZone
dropZoneReadyClassstringds-dropzone-readyOn corresponding dropZone when element is dragged
dropZoneTargetClassstringds-dropzone-targetOn dropZone that has elements from any successful target drop
dropZoneInsideClassstringds-dropzone-insideOn dropZone that has elements inside after any drop


refreshMemoryRatenumber (milliseconds)80Refresh rate on memoization, higher numbers mean better performance but more lag if elements are moving while interacting/selecting, lower numbers mean less lag but worse performance. If none of your DOMNodes are moving, you can set it to a very high number to increase performance
usePointerEventsbooleanfalseWhether to use Pointer Events to replace traditional Mouse or Touch Events. Useful for tools like Google Blockly.
zoomnumber1Zoom scale factor (in case of using CSS style transform: scale() which messes with real positions). Unit scale zoom. (deprecated)

DragSelect Example with all Props

Here is an example using all available settings for your convenience:

new DragSelect({
selectables: document.querySelectorAll('.selectable'),
area: document.querySelector('#area'),
selector: document.querySelector('#selector'),
selectionThreshold: 0,
multiSelectMode: false,
multiSelectToggling: true,
multiSelectKeys: ['Control', 'Shift', 'Meta'],
autoScrollSpeed: 5,
overflowTolerance: { x: 25, y: 25 },
draggability: true,
useTransform: true,
immediateDrag: true,
keyboardDrag: true,
dragKeys: { up:['ArrowUp'], down: ['ArrowDown'], left: ['ArrowLeft'], right: ['ArrowRight'] },
keyboardDragSpeed: 10,
dropZones: [{ id: 'foo', element: document.querySelector('#zone') }],
dropInsideThreshold: 1,
dropTargetThreshold: 0,
customStyles: false,
selectedClass: 'ds-selected',
hoverClass: 'ds-hover',
selectorClass: 'ds-selector',
selectableClass: 'ds-selectable',
selectorAreaClass: 'ds-selector-area',
droppedTargetClass: 'ds-dropped-target',
droppedInsideClass: 'ds-dropped-inside',
droppableClass: 'ds-droppable',
dropZoneClass: 'ds-dropzone',
dropZoneReadyClass: 'ds-dropzone-ready',
dropZoneTargetClass: 'ds-dropzone-target',
dropZoneInsideClass: 'ds-dropzone-inside',
refreshMemoryRate: 80,
usePointerEvents: false,
zoom: 1,