Touch-enabled Selectable Plugin With JavaScript – Selectable.js

---

Preview:

Description:

A performant, dependency-free, mobile-friendly, and fully configurable JavaScript Selectable plugin which allows you to select multiple elements using mouse drag and touch swipe.

How to use it:

Install it with package managers.

# NPM
$ npm install selectable --save

# Bower
$ bower install selectable --save

Import the ‘Selectable’ into your project or include the JavaScript file directly:

<script src='selectable.min.js'></script>

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>

Initialize the Selectable plugin and done.

var selectable = new Selectable({
    // options here
});

Possible options to customize the Selectable plugin.

var selectable = new Selectable({

    // allows to select multiple items
    multiple: true,

    // auto refresh
    autoRefresh: true,

    // the minimum interval in milliseconds to wait before another resize or scroll callback is invoked.
    // higher numbers will increase scroll performance, but can delay item highlighting when auto scrolling.
    throttle: 50,

    // parent container
    appendTo: document.body,

    // CSS selector
    filter: ".ui-selectable",

    // how far the lasso overlaps a selectable element before it's highlighted for selection.
    // "touch" or "fit"
    tolerance: "touch",

    // the direction for selecting consecutive groups of items when holding SHIFT.
    shiftDirection: "normal",

    // auto scroll when selecting
    autoScroll: {
        offset: 40,
        increment: 10,
    },

    // style the lasso. Must be an object of valid CSS properties and values.
    lasso: {
        border: '1px dotted #000',
        backgroundColor: 'rgba(52, 152, 219, 0.2)',
    },

    // default CSS classes
    classes: {
        lasso: "ui-lasso",
        multiple: "ui-multiple",
        selected: "ui-selected",
        container: "ui-container",
        selecting: "ui-selecting",
        selectable: "ui-selectable",
        unselecting: "ui-unselecting"
    }

});

API methods.

var selectable = new Selectable();

selectable.destroy()
selectable.init()
selectable.disable()
selectable.enable()
selectable.bind()
selectable.unbind()
selectable.on()
selectable.off()
selectable.update()
selectable.recalculate()
selectable.select()
selectable.unselect()
selectable.selectAll()
selectable.clear()
selectable.get()
selectable.add()
selectable.remove()
selectable.getItems()
selectable.getNodes()
selectable.getSelectedItems()
selectable.getSelectedNodes()
selectable.setContainer()

Events.

var selectable = new Selectable();

// selectable.on('method', fn);
// selectable.off('method', fn);

selectable.on("selectable.init", function() {
  // when ready
});

selectable.on("selectable.start", function(item) {
  // Fires on mousedown / touchstart.
});

selectable.on("selectable.drag", function(coords) {
  // Fires on mousemove / touchmove.
});

selectable.on("selectable.end", function(selected, unselected) {
  // Fires on mouseup / touchend and touchcancel.
});

selectable.on("selectable.select", function(item) {
  // Fires when an item is selected.
});

selectable.on("selectable.unselect", function(item) {
  // Fires when an item is unselected.
});

selectable.on("selectable.update", function(items) {
  // Fires when the instance is updated.
});

selectable.on("selectable.recalculate", function() {
  // Fires when the dimensions of the items are recalculated.
});

Changelog:

v0.10.9 (06/15/2018)

• Destroying instance doesn’t remove all event handlers