Inside Technique : Targeted Drag and Drop : Hot Tracking

Hot Tracking is a technique used to simulate drag and drop. It is lightweight and easy to understand, but has one major drawback - it requires that the drag targets be physically adjacent to each other - as in the cells of an HTML table. To see how this technique works, let us first look at an example implementation.

So, how did you fare? Don't worry, it's virtually impossible to get all 8 words - 4 is a decent effort:-). Anyway, let's look at the HTML for the table -

<TABLE BORDER=1 class="gamegrid">
<TR>
	<TD>B</TD><TD>N</TD><TD>A</TD><TD>N</TD>
</TR>
<TR>
	<TD>S</TD><TD>E</TD><TD>A</TD><TD>A</TD>
</TR>
<TR>
	<TD>T</TD><TD>D</TD><TD>A</TD><TD>W</TD>
</TR>
<TR>
	<TD>E</TD><TD>L</TD><TD>A</TD><TD>R</TD>
</TR>
</TABLE>

The only thing of note here is the class of "gamegrid" given to the table. Other than that it's a pretty ordinary table. The fun happens in the script. Looking at the first block we see -

document.onmousedown=DragStart;
document.onmouseup=DragEnd;
document.onmousemove=DoDrag;

This is standard code for any drag and drop algorithm, and being outside of any function, is executed immediately after it is parsed. The three functions that are assigned to the mouse events form the core of the algorithm. We will look at the last one, the onmousemove handler, first -

function DoDrag(){
el=event.srcElement;
if(el.tagName=="TD"){
	if(GetTable(el).className=="gamegrid"){
		ResetHotEl();
		HotEl=el;
		HotEl.style.backgroundColor="navy";
		HotEl.style.color="white";
		}
	}
else 
	ResetHotEl();
}

This function takes care of the Hot Tracking part. The first thing it does is check whether the source of the mouseover event was indeed a TD, then it confirms that the TD is part of the gamegrid table. GetTable is a generic function that takes a TD element and returns it's parent TABLE element by moving up the document tree.

The function then proceeds to reset the previous 'Hot' TD back to it's original colour, then marks the current TD as 'Hot'. It then changes the colours of the new 'Hot' TD appropriately. If the source element of the mouseover is not a TD of the gamegrid, the function simply resets the previous 'Hot' TD back to it's original colours.

Looking at the mousedownhandler we see -

function DragStart(){
el=event.srcElement;
if(el.tagName=="TD"){
	if(GetTable(el).className=="gamegrid"){
		DragEl=el;
		tempval=el.innerText;
		el.innerText='';
		}
	}
}

This function is simplicity itself. It uses same check for a valid source element as the previous function. It then marks the element as a Drag Source by setting the DragEl variable to point to it. Finally, in order to give the user visual feedback that an element has been chosen for dragging, it blanks out the element after copying it's value to the tempval variable.

We will now look at the last of the event handlers -

function DragEnd(){
el=event.srcElement;
if(el.tagName=="TD"){
	if(GetTable(el).className=="gamegrid"){
		if(DragEl){
			DragEl.innerText=el.innerText;
			el.innerText=tempval;
			}
		}
	}
else
	if(DragEl) DragEl.innerText=tempval;

ResetHotEl();

DragEl=null;
HotEl=null;
}

Getting that feeling of deja vu? Again the check for a valid element followed a content switch between Drag Source and Drag Target TDs. If the element is not a valid source, the Drag Source TD is reset to it's original value. Finally the current 'Hot' TD gets back it's original colours while the Drag Source and 'Hot' element pointers are set to point to nothing.

This technique can be easily modified to support dragging of images instead of text. However, as we had mentioned earlier, it has it's drawbacks (Try dragging an element in the game grid out of the page to see an example). In the next section we will see a technique that implements a true and clean drag and drop mechanism.

And, btw, the solution to the puzzle is -

D	A	B	S
A	N	E	W
R	A	T	A
E	L	A	N

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.