Share
En muchas aplicaciones web modernas, los desarrolladores buscan formas de hacer que los usuarios interactúen de forma más fácil e intuitiva. Una función de arrastrar y seleccionar puede ayudar a sus usuarios a seleccionar múltiples objetos rápidamente.
Primero necesitamos crear el grupo de objetos que serán seleccionados. Es más probable que no, la mayoría de la gente usará un script del lado del servidor como C # o PHP. Como eso está fuera del alcance de este tutorial, los crearé a mano. Podemos usar la mayoría de las etiquetas como objetos. El único requisito es que el objeto debe tener asignados eventos de mouse básicos. Para este tutorial, simplemente usaré una tabla con dos filas y cinco celdas llenas de DIV con algunos CSS básicos para darles forma..
La parte más importante en la creación de los objetos es la ID; todos necesitan tener un nombre similar. El mío será 'box' y luego un número único después del nombre. En consecuencia, la identificación de nuestro primer elemento será 'box1' y la última será 'box10'. Ahora solo necesitamos agregar los eventos del mouse. Para cada DIV, debemos asignar su "onmousedown" a nuestra función javascript y pasar el objeto que está llamando a la función con la palabra clave 'this'
Ahora que hemos terminado nuestro HTML básico, necesitamos escribir el javascript. Nuestra función javascript tiene tres partes principales: la acción que ocurre cada vez que selecciona o deselecciona un objeto, la acción que inicia el arrastre después del primer clic y la acción que detiene la selección de arrastre. Antes de eso, necesitamos hacer una función javascript y pasar una variable llamada 'obj', este será el objeto que se llama este evento..
función StartDragSelect (obj)
Para la acción que se activa después de seleccionar o deseleccionar un objeto, primero necesitamos una forma para que nuestra función sepa si este objeto está actualmente seleccionado o deseleccionado. Puedes usar la mayoría de los atributos para hacer esto, pero creo que la mejor manera es con una clase CSS. La clase CSS no solo indicará a javascript si el objeto está seleccionado o no, sino que también puede agregar reglas CSS a la clase seleccionada para que los usuarios puedan distinguir visualmente qué objetos están seleccionados. Para el javascript, todo lo que necesitamos es una simple sentencia if -else. Para esta demostración, voy a actualizar un intervalo con el número total de objetos seleccionados, pero también puede llamar a las funciones ajax y otras cosas divertidas aquí para hacer que la selección de arrastre sea más potente..
Accentsconagua
function StartDragSelect (obj) if (obj.className == "selected") obj.className = ""; selectNum--; else obj.className = "selected"; selectNum ++; document.getElementById ("selectCount"). innerHTML = selectNum; Para iniciar la selección de arrastre, usaremos un "bucle for" para tomar el evento onmousedown de cada objeto y asignarlo al evento onmouseover del objeto. Si estuviéramos usando un script del lado del servidor para generar nuestros objetos, también querríamos pasar el número total de objetos a la función javascript para que el bucle funcione, pero como los creamos a mano, podemos codificar el número.
para (i = 0; i<11;i++) document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown
La acción de detención se asignará al evento onmouseup del objeto que inició la selección de arrastre. Para hacer esto, usaremos una función anónima para decirle a javascript qué hacer cuando se dispare el evento onmouseup. Luego usaremos un "for loop" para reasignar el evento onmouseup y hacer que el evento onmouseover sea nulo.
obj.onmouseup = function () for (i = 1; i<11;i++) document.getElementById(i+'d').onmousedown = document.getElementById(i+'d').onmouseover; document.getElementById(i+'d').onmouseover = null;
Has terminado Obviamente, este ejemplo es trivial y utiliza Javascript incrustado (por simplicidad). Pero, estoy seguro de que te puedes imaginar las posibilidades! Tener una mejor manera?
