Select Multiple Elements With Mouse Drag – Selectables

Preview:

Description:

Selectables is a tiny, zero-dependency JavaScript library which allows you to select multiple html elements with mouse drag (combined with or without modifier keys).

See also:

• Single Or Multiple Selection With Mouse Drag – SwipeableMultiselect

How to use it:

Load the Selectables’ JavaScript file before the closing body tag.

<script src="selectables.js"></script>

Initialize the Selectables and specify the target container & elements to select with mouse drag.

new Selectables({
    elements: 'li',
    zone: 'ul'
});

Style the react box when you start dragging.

#s-rectBox {
  position: absolute;
  z-index: 1090;
  border: 2px dashed #cbd3e3;
}

Set the modifier keys to work with mouse drag.

new Selectables({
    elements: 'li',
    zone: 'ul',
    key: 'altKey', // altKey,ctrlKey,metaKey,false
});

More configuration options.

new Selectables({
    elements: 'li',
    zone: 'ul',
    selectedClass: 'active', // class name to apply to seleted items      
    moreUsing: 'shiftKey', //altKey,ctrlKey,metaKey   // add more to selection
    enabled: true, //false to .enable() at later time  
});

Callback functions.

new Selectables({
    start: null, //  event on selection start
    stop: null, // event on selection end
    onSelect: null, // event fired on every item when selected.               
    onDeselect: null // event fired on every item when selected.
});