Consejo rápido: crea una función "clic y arrastra" con JavaScript

En muchas aplicaciones web modernas, los desarrolladores buscan maneras de hacer que la interacción de los usuarios sea más fácil y más intuitiva. Una función "arrastra y selecciona" puede ayudar a tus usuarios a seleccionar múltiples objetos rápidamente.

Paso 1

Primero necesitamos crear el grupo de objetos que será seleccionado. Lo más probable es que la mayoría de las personas usen scripts del lado del servidor, tales como C# o PHP. Ya que eso está más allá del alcance de este tutorial, en su lugar los crearé a mano. Podemos usar la mayoría de las etiquetas como objetos. El único requisito es que el objeto tenga eventos básicos del ratón asignados a él. Para este tutorial, simplemente usaré una tabla con dos filas y cinco celdas rellenas con DIVs con un poco de CSS básico para darles forma.

La parte más importante al crear los objetos son los IDs; todos necesitan tener un nombre similar. El mío será "box" ("cuadro"), y luego un número único después del nombre. En consecuencia, el ID de nuestro primer elemento será "box1" ("cuadro1") y nuestro último elemento será "box10" ("cuadro10"). Ahora solo necesitamos agregar los eventos del ratón. Para cada DIV necesitamos asignar su "onmousedown" a nuestra función de JavaScript y enviar el objeto que está llamando a la función con la palabra clave "this".

1

<table>

2

	<tr>

3

		<td><div id="1d" onmousedown="StartDragSelect(this);"></div></td>

4

		<td><div id="2d" onmousedown="StartDragSelect(this);"></div></td>

5

		<td><div id="3d" onmousedown="StartDragSelect(this);"></div></td>

6

		<td><div id="4d" onmousedown="StartDragSelect(this);"></div></td>

7

		<td><div id="5d" onmousedown="StartDragSelect(this);"></div></td>

8

	</tr>

9

	<tr>

10

		<td><div id="6d" onmousedown="StartDragSelect(this);"></div></td>

11

		<td><div id="7d" onmousedown="StartDragSelect(this);"></div></td>

12

		<td><div id="8d" onmousedown="StartDragSelect(this);"></div></td>

13

		<td><div id="9d" onmousedown="StartDragSelect(this);"></div></td>

14

		<td><div id="10d" onmousedown="StartDragSelect(this);"></div></td>

15

	</tr>

16

17

</table>

Paso 2

Ahora que tenemos nuestro HTML básico listo, necesitamos escribir el código JavaScript. Hay tres partes principales en nuestra función de JavaScript: la acción que ocurre cada vez que seleccionas o deseleccionas un objeto, la acción que inicia el arrastre después del primer clic, y la acción que detiene la selección por arrastre. Antes de todo eso, necesitamos crear una función de JavaScript y enviar una variable llamada "obj"; este será el objeto que llamó a este evento.

1

function StartDragSelect(obj)

2

{

3

4

}

Para la acción que se ejecuta después de que un objeto se selecciona o deselecciona, primero necesitamos un mecanismo mediante el cual nuestra función pueda saber si este objeto está actualmente seleccionado o deseleccionado. Puedes usar la mayoría de los atributos para hacer esto, pero yo creo que la mejor manera es usar una clase CSS. La clase CSS no solamente le indicará a JavaScript si el objeto está seleccionado o no, sino que también puedes agregar reglas CSS a la clase seleccionada para que los usuarios sean capaces de distinguir visualmente qué objetos están seleccionados. Para el código JavaScript, todo lo que necesitamos es una simple sentencia if else. Para esta demostración voy a actualizar un intervalo con la cantidad total de objetos seleccionados, pero también puedes llamar a funciones ajax y otras cosas interesantes aquí para que la selección por arrastre sea más potente.

1

function StartDragSelect(obj)

2

{

3

	if (obj.className == "selected")

4

	{

5

		obj.className = "";

6

		selectNum--;

7

	}

8

	else

9

	{

10

		obj.className = "selected";

11

		selectNum++;

12

	}

13

	document.getElementById("selectCount").innerHTML = selectNum;

14

}

Para iniciar la selección por 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 enviar la cantidad total de objetos a la función de JavaScript para que el bucle funcione, pero ya que los creamos a mano, podemos codificar la cantidad de forma fija.

1

for(i=0;i<11;i++)

2

{

3

document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown

4

}

La acción para detener será asignada al evento onmouseup del objeto que inició la selección por arrastre. Para hacer esto usaremos una función anónima para indicarle a JavaScript qué hacer cuando el evento onmouseup se active. Después usaremos un "bucle for" para reasignar el evento onmouseup e igualar el evento onmouseover al valor null (nulo).

1

obj.onmouseup = function() 

2

{

3

	for(i=1;i<11;i++)

4

	{

5

		document.getElementById(i+'d').onmousedown = document.getElementById(i+'d').onmouseover;

6

		document.getElementById(i+'d').onmouseover = null;

7

	}

8

}

¡Has terminado! Obviamente, este ejemplo es trivial y utiliza JavaScript incrustado (en aras de la simplicidad). ¡Pero estoy seguro de que puedes imaginar las posibilidades! ¿Tienes una mejor manera?