Touch enabled selectable plugin inspired by the jQuery UI widget

by Posted on

Selectable allows HTML DOM elements to be selectable by way of clicking / tapping on the elements or clicking and dragging to draw a selection box. This plugin Inspired by the jQuery UI Selectable plugin. Functionality and options are identical to the jQuery UI version with some additions and performance enhancements.
Selectable mimics the Windows file / directory behaviour, i.e. click and / or drag to select items, hold CTRL to select multiple or hold SHIFT to select consecutive groups of items.

  • No dependencies.
  • Lightweight – less than 5kB gzipped!
  • Compatible with all modern browsers – including IE9.
  • Touch enabled for use with mobile devices such as tablets and smartphones.
  • Customizable.
  • Fluent API.

javascript-selectable


Install

Install plugin via NPM

npm install selectable.js --save

Libraries

Or Include the file from one of the CDNs and include it in your page:

<script src='https://unpkg.com/[email protected]/selectable.min.js'></script>

HTML

Add the CSS class ‘ui-selectable’ to the target elements.

<div id="container">
  <div class="box ui-selectable">
    1
  </div>
  <div class="box ui-selectable">
    2
  </div>
  <div class="box ui-selectable">
    3
  </div>
  <div class="box ui-selectable">
    4
  </div>
  <div class="box ui-selectable">
    5
  </div>
  <div class="box ui-selectable">
    6
  </div>
  <div class="box ui-selectable">
    7
  </div>
  <div class="box ui-selectable">
    8
  </div>
  ...
</div>



JS

Initialize the Selectable plugin and done.

var selectable = new Selectable({
 
    toggle: false,
 
    
    autoRefresh: true,
 
    
    
    throttle: 50,
 
    
    appendTo: document.body,
 
    
    filter: ".ui-selectable",
 
    
    // "touch" or "fit"
    tolerance: "touch",
 
    
    shiftDirection: "normal",
 
    
    autoScroll: {
        offset: 40,
        increment: 10,
    },
 
    
    ignore: false,
 
    
    lasso: {
        border: '1px dotted #000',
        backgroundColor: 'rgba(52, 152, 219, 0.2)',
    },
 
    
    classes: {
        lasso: "ui-lasso",
        multiple: "ui-multiple",
        selected: "ui-selected",
        container: "ui-container",
        selecting: "ui-selecting",
        selectable: "ui-selectable",
        unselecting: "ui-unselecting"
    }
 
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by Mobius1. Visit their official github repository for more information and follow for future updates.


Published by admin