Demo
SelectionArea is started
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Custom styles
#my-custom-area {
background: rgba(52, 152, 219, 0.2);
border: 2px dotted #2980b9;
}
Javascript
let config = {
container: document.querySelector('.parent'),
area: 'my-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);
document.getElementById("start").addEventListener("click", e => selectable.start());
document.getElementById("stop").addEventListener("click", e => selectable.stop());