Press "Enter" to skip to content

Smooth Touch-Enabled Selectable JavaScript Library | selectable.js plugin

Selection simulates the behavior of a Windows file/directory, that is, click and/or drag to select items, hold down CTRL to select multiple items, or hold down SHIFT to select successive groups of objects.

An efficient, dependency-free, mobile-friendly, and fully configurable plugin that allows you to select multiple items using mouse drag and touch drag.

Creates A Small Dropdown List of Selectable Emojis | EmojiButtonList.js

How to make use of 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 immediately:

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

Add the CSS class ‘UI-selectable’ to the goal components.

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

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

Possible options to customize the Selectable plugin.

var selectable = new Selectable({

    // allows toggling of the item state.
    toggle: false,

    // 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",

    // Set to "sequential" to allow the lasso to select items sequentially instead of only the ones within the lasso.
    lassoSelect: "normal",

    // auto scroll when selecting
    autoScroll: {
      threshold: 0,
      increment: 10,
    },

    // sets default ignore items
    ignore: false,

    // auto saves the current selection on mouseup / touchend. 
    saveState: false,

    // limits the number of items that can be selected
    maxSelectable: false,

    // 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",
      selected: "ui-selected",
      container: "ui-container",
      selecting: "ui-selecting",
      selectable: "ui-selectable",
      deselecting: "ui-deselecting"
    }

});

API strategies.

var selectable = new Selectable();

// adds new items
selectable.add(items);

// deselects all items
selectable.clear();

// deselects specific items
selectable.deselect(items);

// destroys the instance
selectable.destroy();

// disables the instance
selectable.disable();

// enables the instance
selectable.enable();

// returns an item(s) reference
selectable.get(items);

// returns an Array of all items
selectable.getItems();

// returns an Array of all selectable element nodes
selectable.getNodes();

// returns an Array of all selected items
selectable.getSelectedItems();

// returns an Array of all selected element nodes
selectable.getSelectedNodes();

// re-init the instance
selectable.init();

// inverts the selection
selectable.invert();

// refreshes the items
selectable.refresh();

// removes items
selectable.remove(items);

// selects items
selectable.select();

// selects all items
selectable.selectAll();

// sets the selection container
selectable.setContainer(container);

// "save" - saves the current selection
// "undo" - moves back to the last selection
// "redo" - restores the last undone selection
// "clear" - removes all saved selections
selectable.state(command);

// updates the instance
selectable.update();

Events handlers are accessible.

var selectable = new Selectable();

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

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

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

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

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

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

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

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

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

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

selectable.on("refresh", function() {
  // Fires when the instance is refreshed.
});

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

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

Touch-enabled Selectable Plugin With JavaScript, javascript multiple select drag and drop, Selectable plugin/Github


See Demo And Download

Official Website(Mobius1): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *