Excuse me, but you are working *WAY* too hard.
You don't *REALLY* care if the mouse has move 2 pixels, right? And that's very likely to happen with a human hand controlling the mouse.
So, instead, just check to see if the mouse is in the SAME TILE!
// set up all the cells:
for ( var r = 0; r < theMap.length; ++r )
var row = theMap[r];
var tr = tbl.insertRow(-1);
for ( var c = 0; c < row.length; ++c )
var cell = tr.insertCell(-1);
cell.id = (theMap.length - r - 2) + ":" + (c+1-5);
cell.className = classes[row.charAt(c)];
cell.onmouedown = cellClickStart;
cell.onmouseup = cellClickEnd;
var whereButtonDown = null;
function cellCickStart( )
whereButtonDown = this;
function cellClickEnd( )
var bDown = whereBUttonDown;
whereBUttonDown = null; // RESET IT!
if ( bDown != this ) /* have we moved to a different tile? */
/* yes...so treat it as a drag: */
mouseDragged( bDown, this );
// still in same cell, so just treat as a click & show menu:
clk.innerHTML = this.id;
typ.innerHTML = this.className;
pop.style.display = "block";
function mouseDragged( fromCell, toCell )
.. you can write this ..
New/changed stuff in red.