Sleek Touch-enabled Multi-Selection Library | Selection.js

Touch-enabled Multi-SelectionSelection.js is a pure JavaScript library which permits the sleek, touch-friendly selectable performance on a bunch of DOM elements.

A simple and lightweight library for realizing visual DOM choices, like the desktop. There is no jQuery. Supports any CSS library, for example, bootstrap. Including support for vertical and horizontal scrolling.


  • Supports touch devices
  • Ultra-small
  • Highly optimized
  • Simple usage
  • No jQuery
  • Vertical and horizontal scroll support

How to make use of it:


$ npm set up @simonwep/selection-js --save
<script src="selection.js"></script>

Insert a bunch of DOM parts into the document.

<section class="example">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>

Initialize the selection.js.

  containers: ['.example'],
  selectables: ['.example'],
  boundarys: ['.example']

Default configuration selection.


  // CSS class of selection space
  class: 'selection-area',

  // or cover (cover the entire element), center (touch the center)
  mode: 'contact',

  // threshold in pixels
  startThreshold: 0,

  // single-click selection
  singleClick: true,

  // enable/disable touch events
  disableTouch: false,

  // container element(s)
  containers: [],

  // selectable element(s)
  selectables: [],

  // start element(s)
  startareas: ['html'],

  // on scrollable areas the number on px per frame is devided by this amount.
  scrollSpeedDivider: 10,

  // boundary element(s)
  boundarys: ['html']

Functions and callbacks obtainable.


  // Will be known as earlier than the choice begins (mouse / touchdown). Can be used
  // to specify which action / mousebutton are wanted to start out the choice.
  validateStart(evt) ,

  // on start 
  onStart(evt) ,

  // on move
  onMove(evt) {
    // Same properties as onStart

  // on stop
  onStop(evt) {
    // Same properties as onStart

  // Element selection has stardet
    evt.selection; // This selection instance
    evt.eventName; // The event name
    evt.element;   // The component from the place the person stardet the selection             
    // return false to cancel the choice course of
  // Element selection has stardet
      evt.selection; // This selection instance
      evt.eventName; // The occasion identify
      evt.element;   // The element which is in the current selection               
      // return true to keep the element


API strategies.

// disable

// enable

// destroy

// save the current selected elements and append those to the following selection

// clear the previous selection

// get selected elements as an array

// take away a selected component from the current selection.

// have to be known as if during a selection elements have been added

Smooth Touch-enabled Selectable Library, DOM-Selection Plugin/Github

See Demo And Download

Official Website(Simonwep): Click Here

This superior jQuery/javascript plugin is developed by Simonwep. For extra Advanced Usages, please go to the official website.

Leave a Comment