Tiny Draggable DOM Selection JavaScript Library – Box Selection

Category: Javascript | September 9, 2020
Views Total:945 views
Official Page:Go to website
Last Update:September 9, 2020


Tiny Draggable DOM Selection JavaScript Library – Box Selection


Box Selection is a tiny vanilla JavaScript library for easy DOM selection that enables the user to select multiple items within a container via mouse drag.

See Also:

How to use it:

1. Install and import the Box Selection.

$ npm i box-selection --save
module.exports = require('./lib/box-selection')

2. Add items to be selectable to a container element as follows:

<div class="wrapper" id="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>

3. Create an instance of the Box Selection and done.

const instance = new BoxSelection({
      // default: the whole document
      container: document.getElementById('container'),
      // default: .item
      itemSelector: '.item'

4. Get the selected items using the onSelectionChange callback.

const instance = new BoxSelection({
      onSelectionChange: (selectedItems) => {

5. Customize the styles of the selection box.

const instance = new BoxSelection({
      selectionClass: '.selection'
.selection {
  background-color: rgba(255, 255, 255, 0.5);

6. Customize the styles of the items when selected.

const instance = new BoxSelection({
      selectedClass: '.selected'
.selected {
  background-color: #222;

7. Determine the selection mode: ‘strict’ or ‘loose’.

const instance = new BoxSelection({
      mode: 'loose'

You Might Be Interested In:

Leave a Reply