Plugin seleccionable táctil con JavaScript-seleccionable. js

Vista prévia

Descripción

Un Performant, libre de dependencia, móvil amigable, y totalmente configurable JavaScript seleccionable plugin que le permite seleccionar múltiples elementos usando arrastrar el ratón y toque golpe.

Funcionamiento

Instálelo con gestores de paquetes.

# NPM
$ npm install selectable --save

# Bower
$ bower install selectable --save

Importar el ' seleccionable ' en su proyecto o incluir el archivo JavaScript directamente:

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

Agregue la clase CSS ' UI-seleccionable ' a los elementos de destino.

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

Inicializa el plugin seleccionable y listo.

var selectable = new Selectable({


// options here
});

Opciones posibles para personalizar el plugin seleccionable.

var selectable = new Selectable({



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



// the direction for selecting consecutive groups of items when holding SHIFT.


shiftDirection: "normal",



// auto scroll when selecting


autoScroll: {




offset: 40,




increment: 10,


},



// sets default ignore items


ignore: 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",




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.
});

Registro de cambios

02/25/2019

• v0.16.0

12/09/2018

• v0.15.6

12/09/2018

• v0.15.2: Fix touch controls

12/07/2018

• v0.15.1: Fix reference error, remove debug code

12/06/2018

• v0.14.1: Set spacebar to toggle active item

12/02/2018

• v0.14.0

11/29/2018

• v0.13.4

11/08/2018

• v0.13.3

10/31/2018

• v0.13.1: hotfix

10/30/2018

• v0.12.3

10/30/2018

• Fijar la posición de lazo al anexar al cuerpo

v0.12.1 (10/29/2018)

• corregir la selección incorrecta

v0.11.0 (09/30/2018)

• Valor predeterminado ignorar

v0.10.9 (06/15/2018)

• La destrucción de la instancia doesn â & #128; & #153; t elimina todos los controladores de eventos