A Small, Draggable JavaScript Library for Defining the DOM | Box Selection

A small JS library for making square selections on HTML elements. Uses CSS transforms so there’s no paint flicker.

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

JavaScript Library That Groups HTML Draggable Elements | magnet.js

How to make use of 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 component as follows:

<div class="wrapper" id="container">
  <div class="item"> </div>
  <div class="item"> </div>
  <div class="item"> </div>
  <div class="item"> </div>
  <div class="item"> </div>

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

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'

Tiny Draggable Selection JavaScript Library, javascript mouse drag selection, Box Selection Github

See Demo And Download

Official Website(afterburn): Click Here

This superior jQuery/javascript plugin is developed by afterburn. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…