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

Features:

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

How to make use of it:

Installation.

# NPM
$ 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>
  ...
</section>

Initialize the selection.js.

Selection.create({
  containers: ['.example'],
  selectables: ['.example'],
  boundarys: ['.example']
});

Default configuration selection.

Selection.create(

  // 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.

Selection.create({

  // 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
  startFilter(evt) 
    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
  selectionFilter(evt) 
      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
selection.disable();

// enable
selection.enable();

// destroy
selection.destroy();

// save the current selected elements and append those to the following selection
selection.keepSelection();

// clear the previous selection
selection.clearSelection();

// get selected elements as an array
selection.getSelection();

// take away a selected component from the current selection.
selection.removeFromSelection(el:HTMLElement);

// have to be known as if during a selection elements have been added
selection.resolveSelectables();

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

See Demo And Download