seleccionando elementos múltiples usando el cambio y el clic del mouse - jquery

Question

¿Es posible usar el desplazamiento y el clic del mouse para seleccionar múltiples elementos en una página usando jquery?

Tengo varios divs que he dado a un índice de tabulación para que pueda seleccionarlos y puedo hacer cosas como eliminarlos, etc.

Quiero ser capaz de seleccionar más de 1 manteniendo pulsada la tecla shift y el uso el mouse para hacer clic en cada div y estoy luchando para hacer esto.

¿Alguien sabe cómo se puede hacer esto?

Answer 1

Claro, si usted está dispuesto a hacer un trabajo :)

Escuche el keydown cambiar, definir un VAR que se puede acceder desde dentro de sus funciones de controlador de clic, si el var se establece a continuación, agregar ese elemento, (o su tabindex para su implementación actual) a su lista de elementos para operar cuando se presiona un 'botón de acción'.

desarma la var cuando obtienes el evento de cambio de tecla.

Answer 2

Parece que jQuery UI Selectable es lo que buscas, you can try it out here.

para quedarse con las convenciones del sistema operativo, que utiliza claves es Ctrl y no Shift, esto no es una opción que puede cambiar sin cambiar el código jQuery UI en sí. También tiene la función de hacer clic y arrastrar sobre los elementos para obtener una selección rectangular también ... si eso sirve de algo.

Answer 3

hice algo así como que hace algún tiempo, con jQuery:

$(id).click(function(event){ //Mouse Click+shift event 
     if(event.shiftKey){ 
        //give some attribute that can indentify the elements of the selection 
        //example rel='multi-selection' or class='multi-selection' 
     } 
}); 

entonces usted debe hacer las funciones que seleccionan estos elementos y hacer lo que necesita, he utilizado esto para arrastrar varios elementos. Ejemplo si desea eliminar este divs, puede por ejemplo:

function deleteMultiSelection(){ 
    $('html').find('div[rel=multi-selection']).each(function(){ 
      $(this).remove(); 
    }) 

} 

$("#button").click(function(){ 
    deleteMultiSelection(); 
}) 

Tenga cuidado porque no probé este código.

Answer 4

Para ser honesto, la tecla Ctrl + clic izquierdo para seleccionar varios elementos es un comportamiento UI bastante estándar y está integrado en jQueryUI seleccionable. ¿Sabía también que puede hacer clic izquierdo y arrastrar un foco sobre varios elementos para seleccionarlos?

Sin embargo, puedo ver una ventaja a la hora de ofrecer el comportamiento en cuestión, entonces, ¿qué le parece usar el clic izquierdo o arrastrar para seleccionar y luego hacer clic izquierdo y arrastrar para también anular la selección?

Puede que no sea la forma más eficiente de hacerlo, pero después de jugar con las devoluciones de llamada integradas, he encontrado algo que parece funcionar. Basado en el código de su pregunta, me he conectado a las funciones de devolución de llamada integradas para almacenar lo que se seleccionó y también manejar la eliminación de la selección. JavaScript duplicado a continuación, pero

Answer 5

Tengo un plugin jQuery que hace exactamente lo que quiere que se llama finderSelect habilita Shift + clic, Ctrl + clic, Ctrl + clic + arrastrar y hacer clic en cualquier elemento.