Seleccionar varios elementos con arrastrar ratón-selectables

Vista prévia

Descripción

Selectables es una pequeña biblioteca JavaScript de dependencia cero que le permite seleccionar varios elementos HTML con el ratón arrastrar (combinado con o sin teclas modificadoras).

See also:

• selección única o múltiple con el ratón arrastrar – SwipeableMultiselect

Funcionamiento

Cargue el archivo JavaScript de selectables antes de la etiqueta body de cierre.

<script src="selectables.js"></script>

Inicialice las selectables y especifique el contenedor de destino & elementos que desea seleccionar con el arrastre del ratón.

new Selectables({


elements: 'li',


zone: 'ul'
});

Estile el cuadro reAct cuando empiece a arrastrarlo.

#s-rectBox {

position: absolute;

z-index: 1090;

border: 2px dashed #cbd3e3;
}

Configure las teclas modificadoras para que funcionen con el arrastre del ratón.

new Selectables({


elements: 'li',


zone: 'ul',


key: 'altKey', // altKey,ctrlKey,metaKey,false
});

Más opciones de configuración.

new Selectables({


elements: 'li',


zone: 'ul',


selectedClass: 'active', // class name to apply to seleted items





moreUsing: 'shiftKey', //altKey,ctrlKey,metaKey
 // add more to selection


enabled: true, //false to .enable() at later time

});

Funciones de devolución de llamada.

new Selectables({


start: null, //
event on selection start


stop: null, // event on selection end


onSelect: null, // event fired on every item when selected.









 onDeselect: null // event fired on every item when selected.
});