Multi-Item Selection

Today we’d like to share a little script with you that allows a click & hover selection of checkboxes or any other element. Mainly the idea comes from the common task that we do every day in our email app or elsewhere: checking checkboxes, one after the other by clicking on them. Sometimes you’d like to select more items more quickly so we thought it might be an interesting approach to click, hold and then simply move over all the items that should be selected. It’s quicker and easier to select multiple items like that.

Please note that this is for desktop only.

We’ve made two demos: in the first one we only want the checkboxes to be selectable, and in the second one we want it to be possible to hover over the whole item in order to select it.

Check out the videos to understand the interaction better:

This video shows the interaction with the checkboxes only. See demo 1.

It’s a bit difficult to see when there’s a click and when it’s just holding the click so this is what happens: when clicking on a checkbox, we’ll need to hold the click in order to activate the selection and the move-and-select behavior. So you’ll need to wait for a customizable period of time (in the demo it’s 300ms) and then when the checkbox is selected, you can move and select the other items.

This video shows the interaction with the entire list item. See demo 2.

This is how you initialize the script:

new magicSelection( [selector], {
	// time to start the selection
	onSelectionTime : 300,
	// element "el" is selected
	onSelection : function( el ) {},
	// element "el" is clicked
	onClick : function( el ) {}
	// selection starts (mouse down for [onSelectionTime]ms)
	onSelectionStart : function( ev ) { return false; },
	// selection ends (mouse up)
	onSelectionEnd : function( ev ) { return false; },
} );

Hope you find this useful and feedback is welcome!