Biblioteca seleccionable con tacto suave-Selection. js
| Autor: | Simonwep |
|---|---|
| Views Total: | 1,231 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 14, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Selection. js es una biblioteca JavaScript pura que permite la funcionalidad seleccionable suave y táctil en un grupo de elementos DOM.
La biblioteca permite al usuario seleccionar varios elementos DOM con gestos táctiles y de arrastre del ratón. umbral en píxeles
¿Cómo funciona?
Instalación.
# NPM $ npm install @simonwep/selection-js --save
<script src="selection.js"></script>
Inserte un grupo de elementos DOM en el documento.
<section class="example"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> ... </section>
Inicialice Selection. js.
Selection.create({
containers: ['.example'],
selectables: ['.example'],
boundarys: ['.example']
}); Aplique sus propios estilos CSS al área de selección.
.selection-area {
background: rgba(0, 0, 255, 0.1);
border-radius: 0.1em;
border: 0.05em solid rgba(0, 0, 255, 0.2);
} Opciones de configuración predeterminadas.
Selection.create({
// CSS class of selection area
class: 'selection-area',
// or cover (cover the entire element), center (touch the center)
mode: 'touch',
// threshold in pixels
startThreshold: 0,
// single-click selection
singleClick: true,
// enable/disable touch events
disableTouch: false,
// container element(s)
containers: [],
// selectable element(s)
selectables: [],
// start element(s)
startareas: ['html'],
// on scrollable areas the number on px per frame is devided by this amount.
scrollSpeedDivider: 10,
// boundary element(s)
boundarys: ['html']
}); Funciones y devoluciones de llamada disponibles.
Selection.create({
// Will be called before the selection starts (mouse / touchdown). Can be used
// to specify which action / mousebutton are needed to start the selection.
validateStart(evt) {
evt; // MouseEvent or TouchEvent
// Return true to start the selection, false to cancel it.
return true;
},
// on start
onStart(evt) {
evt.selection;
evt.eventName;
evt.areaElement;
evt.originalEvent;
evt.selectedElements;
evt.changedElements;
},
// on move
onMove(evt) {
// Same properties as onStart
},
// on stop
onStop(evt) {
// Same properties as onStart
},
// Element selection has stardet
startFilter(evt) {
evt.selection; // This selection instance
evt.eventName; // The event name
evt.element;
// The element from where the user stardet the selection
// return false to cancel the selection process
},
// Element selection has stardet
selectionFilter(evt) {
evt.selection; // This selection instance
evt.eventName; // The event name
evt.element;
// The element which is in the current selection
// return true to keep the element
},
}); API methods.
// disable selection.disable(); // enable selection.enable(); // destroy selection.destroy(); // save the current selected elements and append those to the next selection selection.keepSelection(); // clear the previous selection selection.clearSelection(); // get selected elements as an array selection.getSelection(); // remove a particular element from the current selection. selection.removeFromSelection(el:HTMLElement); // need to be called if during a selection elements have been added selection.resolveSelectables();
Registro de cambios
02/14/2019
- v0.2.1: Add resolveSelectables to manually update selectables
01/03/2019
- v0.2.0
11/13/2018
- v0.1.5: Remove unused devDependencie and some spellfixes
10/28/2018
- Mejore el rendimiento
10/27/2018
- Desplazamiento automático y seleccione vertical
10/26/2018
- Fix Edge bug
10/25/2018
- Mejore el rendimiento in critical passages
10/24/2018
- v0.1.4
10/14/2018
- Añadir función destruir
v0.1.3 (09/08/2018)
- actualizar
v0.1.2 (09/06/2018)
- Agregar validateStart opción
v0.1.1 (07/28/2018)
- actualizar
07/22/2018
- Refactorización y simplificación inspirada en el Golang
