Small library for making box selections on HTML elements in JavaScript

Overview

Box Selection

Small JavaScript library for making box selections on HTML elements. Makes use of CSS transforms so there is no paint flashing.

Installation

npm install --save box-selection

Usage

const instance = new BoxSelection({
  container: document.getElementById('container'), // The scope in which BoxSelection should function.
  itemSelector: '.item', // The CSS class BoxSelection will use to target items.
  selectedClass: '.selected', // The CSS class that will be added to the HTML elements that fall within the selection box.
  selectionClass: '.selection', // The CSS class that will be added to the selection box.
  mode: 'loose', // 'loose' or 'strict'
  onSelectionChange: (selectedItems) => {
    console.log(selectedItems) // Array of HTML elements that fall within the selection box.
  }
})

instance.unbind() // Function you can call to unbind all of BoxSelection's events.

Customization

CSS styling used in GIF:

.selection {
	background-color: rgba(255, 165, 0, 0.5);
	border: 1px solid darkorange;
	z-index: 1;
}
You might also like...

A JavaScript library for adding ripple effects to HTML elements based on mouse events.

About project Ripplejs is an open source javascript library created for the purpose of adding ripple effects to html elements based on mouse events. L

May 10, 2022

LiveTabs is a Javascript library that allows you to create and manage tabs on the fly. This library gives the ability to your application to act like browser tabs, making dynamic tabs.

LiveTabs Table of content Description Goals Technologies Setup Description LiveTabs is a Javascript library that allows you to create and manage tabs

May 3, 2022

Making(Creating , Modifying , Deleting) Lists you have to do 😎 Built Only with Html, JavaScript, Css

Making(Creating , Modifying , Deleting) Lists you have to do 😎 Built Only with Html, JavaScript, Css

To-Do_App Live Demo You Can See The Project Live On: Here Description A Simple To-Do App Mainly Written In Javascript The project structure is kinda l

Nov 2, 2022

Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app

Gofiber and NextJS Static HTML Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app. R

Jan 22, 2022

Turn an HTML input box to a duration picker, without jQuery

html-duration-picker.js html-duration-picker.js is a very tiny JS library used for transforming a native HTML text input into a duration picker. The a

Oct 19, 2022

Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support.

vite-plugin-virtual-mpa Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support, generate multiple files using only on

Dec 16, 2022

A jQuery plugin for making html tables searchable and sortable with pagination

jQuery.fancyTable A jQuery plugin for making html tables searchable and sortable with pagination. Live demo See a live demo on CodePen Installation Us

Dec 19, 2022

A library for controlling the Minecraft Console Client and making bots for it in JavaScript/TypeScript.

MCC.jS About A work in progress JavaScript/TypeScript library for remote control and bot creation for the Minecraft Console Client using RPC over WebS

Sep 14, 2022

FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel

FortuneSheet FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel English | çź€äœ“äž­æ–‡ Purpose The

Jan 3, 2023
Owner
Kevin Karsopawiro
Self-taught full stack developer with a profound passion for using new technologies to create scalable, performant and innovative software.
Kevin Karsopawiro
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.

customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus

Suraj Aswal 17 Sep 10, 2022
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till mÀnniskor pÄ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements.

svg-pen-sketch An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements when using a digital pen (such as the Surface Pen).

Kevin Desousa 8 Jul 27, 2022
A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and

Sean McQuaid 7 Aug 16, 2022
✏ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

jquery-editable-table A small jQuery extension to turn an HTML table editable for fast data entry and validation Demo ?? https://jsfiddle.net/torrobin

Tor 7 Jul 31, 2022
A JavaScript library to create html elements with js easily

applecake is a javascript library for making HTML elements with javascript really easy . Why applecake ? Really easy to use It is not heavy It has a s

null 4 Jul 21, 2021
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot

Martin Laxenaire 1.4k Jan 1, 2023