Quick Tip: Create A “Click And Drag” Function With JavaScript

In many modern web applications, developers look for ways to make it easier and more intuitive for users to interact. A drag and select function can help your users select multiple objects quickly.

Step 1

We first need to create the group of objects that will be selected. More likely than not, most people will use server side script such as C# or PHP. Since that is beyond the scope of this tutorial, I will instead create them by hand. We can use most tags as objects. The only requirement is that the object must have basic mouse events assigned to them. For this tutorial I will simply use a table with two rows and five cells filled with DIVs with some basic CSS to give them shape.

The most important part in creating the objects is the ID’s; they all need to have one similar name. Mine will be ‘box’ – and then a unique number after the name. Consequently, our first element’s ID will be ‘box1′ and our last will be ‘box10′. Now we just need to add the mouse events. For each DIV we need to assign its “onmousedown” to our javascript function and pass in the object that is calling the function with the ‘this’ keyword

<table>
	<tr>
		<td><div id="1d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="2d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="3d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="4d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="5d" onmousedown="StartDragSelect(this);"></div></td>
	</tr>
	<tr>
		<td><div id="6d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="7d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="8d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="9d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="10d" onmousedown="StartDragSelect(this);"></div></td>
	</tr>

</table>

Step 2

Now that we have our basic HTML done, we need to write the javascript. There are three primary parts to our javascript function: The action that happens every time you select or deselect an object, the action that starts the drag after the first click, and the action that stops the drag select. Before any of that we need to make a javascript function and pass in one variable called ‘obj’ this will be the object that is called this event.

function StartDragSelect(obj)
{

}

For the action that triggers after an object is selected or deselected, we first need a way for our function to know if this object is currently selected or deselected. You can use most attributes to do this, but I find the best way is with a CSS class. Not only will the CSS class tell javascript if the object is selected or not but you can also add CSS rules to the selected class so that users will be able to visually distinguish which objects are selected. For the javascript, all we need is a simple if -else statement. For this demo I’m going to update a span with the total number of selected objects, but you could also call ajax functions and other fun things here to make the drag select more powerful.

function StartDragSelect(obj)
{
	if (obj.className == "selected")
	{
		obj.className = "";
		selectNum--;
	}
	else
	{
		obj.className = "selected";
		selectNum++;
	}
	document.getElementById("selectCount").innerHTML = selectNum;
}

To start the drag select, we will use a “for loop” to take each object’s onmousedown event and assign it to the object’s onmouseover event. If we were using a server side script to generate our objects we would want to also pass in the total number of objects to the javascript function so the loop will work, but since we created them by hand we can hard code the number.

for(i=0;i<11;i++)
{
document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown
}

The stop action will be assigned to the onmouseup event of the object that started the drag select. To do this we will use an anonymous function to tell javascript what to do when the onmouseup event triggers. Then we will use a "for loop" to reassign the onmouseup event and make the onmouseover event null.

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;
	}
}

You're done! Obviously, this example is trivial and uses embedded Javascript (for the sake of simplicity). But, I'm sure you can imagine the possibilities! Have a better way?