We first need to make the group of objects that will be selected, more likely then not most people we make these with a server side script such as C# or PHP. Since that is out of the scope of this tutorial I will just make them by hand. We can use most tags as objects for our click and drag select objects the only requirement is that the object can have basic mouse events assigned to them. For this tutorial I will just 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 their ID's, they all need to have one similar name, mine will be 'box' and then a unique number after the name. So 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>
Now that we have our basic HTML done we need to make the javascript to power it. There are three main parts of our javascript function, the actual 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 what objects are selected. For the javascript all we need is a simple if else statement. For this demo I'm just 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 anyonmus function to tell javascript what to do when the onmouseup event triggers. Then we will use a for loop just like the one to start the drag select but instead 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;
}
}