Fork me on GitHub!
selection.js

Click to select the boxes!

Click and hold left mouse to make a multi-selection!

Hold ctrl to make multiple selections.

Comment tutorial to realize the demo
const options = {

    // Class for the selection-area
    class: 'selection',

    // All elements in this container can be selected
    containers: ['.box-wrap'],

    // The container is also the boundary in this case
    boundarys: ['.box-wrap'],

    onSelect(evt) {

        // Check if clicked element is already selected
        const selected = evt.target.classList.contains('selected');

        // Remove class if the user don't pressed the control key and the
        // current target is already selected
        if (!evt.originalEvent.ctrlKey) {

            // Remove class from every element which is selected
            evt.selectedElements.forEach(s => s.classList.remove('selected'));

            // Clear previous selection
            this.clearSelection();
        }

        if (!selected) {

            // Select element
            evt.target.classList.add('selected');
            this.keepSelection();
        } else {

            // Unselect element
            evt.target.classList.remove('selected');
            this.removeFromSelection(evt.target);
        }
    },

    onStart(evt) {

        // Get elements which has been selected so far
        const selectedElements = evt.selectedElements;

        // Remove class if the user don't pressed the control key
        if (!evt.originalEvent.ctrlKey) {

            // Unselect all elements
            selectedElements.forEach(s => s.classList.remove('selected'));

            // Clear previous selection
            this.clearSelection();
        }
    },

    onMove(evt) {

        // Get the currently selected elements and those
        // which where removed since the last selection.
        const selectedElements = evt.selectedElements;
        const removedElements = evt.changedElements.removed;

        // Add a custom class to the elements which where selected.
        selectedElements.forEach(s => s.classList.add('selected'));

        // Remove the class from elements which where removed
        // since the last selection
        removedElements.forEach(s => s.classList.remove('selected'));
    },

    onStop(evt) {
        this.keepSelection();
    },
};

Selection.create(options);