Touch-enabled Selectable Plugin With JavaScript – Selectable.js

In CSS Tutorial Nov 14, 2017
Touch-enabled Selectable Plugin With JavaScript – Selectable.js

Selectable.js is a plugin which is performant, dependency-free, mobile-friendly, and absolutely configurable. JavaScript Selectable plugin which lets you choose a number of components utilizing mouse drag and contact swipe.

use it:

Set up it with bundle managers.

# NPM $ npm set up selectable --save # Bower $ bower set up selectable --save

Import the ‘Selectable’ into your venture or embrace the JavaScript file instantly:

<script src=""></script>

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

<div id="container"> <div class="field ui-selectable"> 1 </div> <div class="field ui-selectable"> 2 </div> <div class="field ui-selectable"> three </div> <div class="field ui-selectable"> four </div> <div class="field ui-selectable"> 5 </div> <div class="field ui-selectable"> 6 </div> <div class="field ui-selectable"> 7 </div> <div class="field ui-selectable"> eight </div> ... </div>

Initialize the Selectable plugin and achieved.

var selectable = new Selectable();

Potential choices to customise the Selectable plugin.

var selectable = new Selectable();

API strategies.

var selectable = new Selectable(); selectable.destroy() selectable.init() selectable.disable() selectable.allow() selectable.bind() selectable.unbind() selectable.on() selectable.replace() selectable.recalculate() selectable.choose() selectable.unselect() selectable.selectAll() selectable.clear() selectable.get() selectable.add() selectable.take away() selectable.getItems() selectable.getNodes() selectable.getSelectedItems() selectable.getSelectedNodes() selectable.setContainer()


var selectable = new Selectable(); // selectable.on('technique', fn); //'technique', fn); selectable.on("selectable.init", operate() ); selectable.on("selectable.begin", operate(merchandise) ); selectable.on("selectable.drag", operate(coords) ); selectable.on("selectable.finish", operate(chosen, unselected) ); selectable.on("selectable.choose", operate(merchandise) ); selectable.on("selectable.unselect", operate(merchandise) ); selectable.on("selectable.replace", operate(objects) ); selectable.on("selectable.recalculate", operate() );


Leave a Reply

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