Author: | afterburn |
---|---|
Views Total: | 993 views |
Official Page: | Go to website |
Last Update: | September 9, 2020 |
License: | MIT |
Preview:

Description:
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 $ 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> </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) => { console.log(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' })