Simple JavaScript mouse & touch seletion area to any DOM container element.
How to use | API Reference | Demo
npm install selection-areayarn add selection-areaClone or download zipped source code into node_modules project folder.
git clone https://github.com/lucasmenendez/selection-area.git <project>/node_modules/selection-areaImport using script html tags with vendor path:
<script src="/node_modules/selection-area/dist/selection-area.js"></script>Or import using ES6 import:
import { SelectionArea } from 'selection-area';Importing with unpkg.com:
<script src="https://unpkg.com/selection-area"></script>Define container for selection area and selectable childs.
<div class="parent">
<div class="child">0</div>
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>Define SelectionArea behaviour with configuration object, check available parameters here.
let config = {
container: document.querySelector('.parent'),
area: {
class: 'custom-area'
},
targets: '.child',
touchable: true,
autostart: true,
callback: selection => {
if (selection.length == 0) alert("empty selection");
else alert(`${ selection.length } items selected`);
}
}
let selectable = new SelectionArea(config);Also you can stylize the selection area element adding style yo defined class.
.custom-area {
background: rgba(52, 152, 219, 0.2);
border: 2px dotted #2980b9;
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent