[Old Pedant]

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!

Like this:

      // 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 );
          return;
      }

      // 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.