Javascript - event is not defined error
<p>I found the code below that someone posted in this forum which is what I need.  But this code only works in IE, not Mozilla Firefox.   This code can perform the row drag up/down (green symbol on the right).</p>

<p>Got this code from link:</p>

<p><a href="http://stackoverflow.com/questions/4954373/move-table-rows-up-and-down-jquery-javascript">Move table rows up and down - Jquery/Javascript</a></p>

<p>In Mozilla Firefox, I keep getting "ReferenceError: event is not defined".  It seems to be Firefox is not recognize the event, but I couldn't figure out how to fix it.</p>

<p>Can someone please help.  Thanks!</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
      &lt;body bgcolor=white&gt;
        &lt;table width=100% height=100% cellpadding=0 cellspacing=0&gt;
          &lt;tr&gt;
            &lt;td valign=top style="padding: 5px;" rowspan=2 height=99%&gt;
              &lt;script language="JavaScript"&gt;
                function get( e ){ return( document.getElementById( e ) ); }

                function findPosX( obj )
                {
                  var curleft = 0;
                  if( obj.offsetParent )
                  {
                    while( obj.offsetParent )
                    {
                      curleft += obj.offsetLeft;
                      obj = obj.offsetParent;
                    }
                  }
                  else if( obj.x )  curleft += obj.x;
                  return( curleft );
                }

                function findPosY( obj )
                {
                  var curtop = 0;
                  if( obj.offsetParent )
                  {
                    while( obj.offsetParent )
                    {
                      curtop += obj.offsetTop;
                      obj = obj.offsetParent;
                    }
                  }
                  else if( obj.y ) curtop += obj.y;
                  return( curtop );
                }

                function getClickX( e )
                {
                  if( !e ) e = event;
                  var scrollLeft = document.body.scrollLeft;
                  if( scrollLeft &lt;= 0 &amp;&amp; document.documentElement )
                  {
                    scrollLeft = document.documentElement.scrollLeft;
                  }
                  return( e.clientX + scrollLeft );
                }

                function getClickY( e )
                {
                  if( !e ) e = event;
                  var scrollTop = document.body.scrollTop;
                  if( scrollTop &lt;= 0 &amp;&amp; document.documentElement )
                  {
                    scrollTop = document.documentElement.scrollTop;
                  }
                  return( e.clientY + scrollTop );
                }

                window.onload = function()
                {
                  addTask( "" );
                };

                document.onclick = function()
                {
                  with( get("ControlDiv") )
                  {
                    style.visibility = "hidden";
                  }
                }

                function RowFromPos( table, x, y )
                {
                  if( x &gt;= findPosX( table ) &amp;&amp; x &lt; findPosX( table ) + table.clientWidth )
                  {
                    if( y &gt;= findPosY( table ) &amp;&amp; y &lt; findPosY( table ) + table.clientHeight )
                    {
                      for( i = 0 ; i &lt; table.rows.length ; i++ )
                      {
                        if( x &gt;= findPosX( table.rows[i] ) &amp;&amp; x &lt; findPosX( table.rows[i] ) + table.rows[i].clientWidth &amp;&amp;
                            y &gt;= findPosY( table.rows[i] ) &amp;&amp; y &lt; findPosY( table.rows[i] ) + table.rows[i].clientHeight )
                        {
                          return( i );
                        }
                      }
                    }
                  }

                  return( -1 );
                }

                var clickY = 0, dragRow = null;
                function onDragBegin( row )
                {
                  document.onmouseup = onDragDrop;
                  document.onmousemove = onDragDrag;

                  dragRow = row;
                  clickY = getClickY( event );
                  dragRow.style.backgroundColor = "gold";
                }

                function onDragDrag()
                {
                  var curX = getClickX( event );
                  var curY = getClickY( event );
                  var rowIndex = RowFromPos( get("TaskTable"), curX, curY );

                  if( rowIndex != -1 &amp;&amp; rowIndex != dragRow.rowIndex )
                  {
                    if( rowIndex &lt; dragRow.rowIndex )
                    {
                      // Move Up
                      var parent = dragRow.parentNode;
                      var prev = dragRow.previousSibling;
                      if( prev )
                      {
                        parent.removeChild( dragRow );
                        parent.insertBefore( dragRow, prev );
                      }
                    }
                    else
                    {
                      // Move down
                      var next = dragRow.nextSibling;
                      var par = dragRow.parentNode;
                      par.removeChild( dragRow );
                      if( next.nextSibling )
                      {
                        par.insertBefore( dragRow, next.nextSibling );
                      }
                      else
                      {
                        par.appendChild( dragRow );
                      }
                    }
                  }
                }

                function onDragDrop()
                {
                  document.onmouseup = null;
                  document.onmousemove = null;

                  dragRow.style.backgroundColor = "";
                  fixTable();
                }

                function addTask( task)
                {
                  var table = get("TaskTable");
                  var row = table.insertRow( table.rows.length );

                  var cell = row.insertCell( row.cells.length );
                  cell.align = "right"; cell.vAlign = "bottom";
                  cell.width = "1%"; cell.noWrap = true;
                  cell.innerHTML = "&lt;b&gt;0.&lt;/b&gt;";

                  cell = row.insertCell( row.cells.length );
                  cell.width = "99%";

                  var div = document.createElement("DIV");
                  div.designMode = "on";
                  div.contentEditable = true;
                  div.style.width = "99%";
                  div.style.height = "50px";
                  div.style.border = "1px solid black";
                  div.style.padding = "2px";
                  div.style.overflow = "scroll";
                  div.style.overflowX = "auto";
                  div.style.cursor = "text";
                  div.innerHTML = ( task != "" ? task : "&lt;font color=\"gray\" face=\"Tahoma\"&gt;Enter task desciption here&lt;/font&gt;" );
                  div.onfocus = function()
                  {
                    if( this.innerText == "Enter task desciption here" )
                    {
                      this.innerHTML = "";
                    }
                    event.cancelBubble = true;
                    showControlDiv( this );
                  }
                  div.onclick = function()
                  {
                    event.cancelBubble = true;
                  };
                  div.onblur = function()
                  {
                    if( this.innerText.replace(/^\s*/, "").replace(/\s*$/, "") == "" )
                    {
                      this.innerHTML = "&lt;font color=\"gray\" face=\"Tahoma\"&gt;Enter task desciption here&lt;/font&gt;";
                    }
                  }
                  div.onselectstart = function()
                  {
                    event.cancelBubble = true;
                  };
                  cell.appendChild( div );

                  cell = row.insertCell( row.cells.length );
                  cell.width = 15; cell.align = "right"; cell.vAlign = "bottom";
                  cell.innerHTML = "&lt;font color=red face=Tahoma size=2 style='cursor: pointer;' onclick='JavaScript: deleteTask( this.parentElement.parentElement.rowIndex );'&gt;&lt;b&gt;X&lt;/b&gt;&lt;/a&gt;";

                  var handle = document.createElement( "DIV" );
                  handle.innerHTML = "&lt;font color=green size=6&gt;&lt;b&gt;*&lt;/b&gt;&lt;/font&gt;";
                  handle.style.cursor = "n-resize";
                  handle.onmousedown = function()
                  {
                    onDragBegin( this.parentElement.parentElement );
                  };
                  cell.appendChild( handle );

                  fixTable();
                }

                function deleteTask( row )
                {
                  get("TaskTable").deleteRow( row );
                  fixTable();
                }

                function deleteAll()
                {
                  var table = get("TaskTable");
                  while( table.rows.length &gt; 0 ) table.deleteRow( 0 );
                }

                function fixTable()
                {
                  var numTask = 0;
                  var table = get("TaskTable");
                  for( var i = 0 ; i &lt; table.rows.length ; i++ )
                  {
                    numTask++;
                    table.rows[i].cells[0].innerHTML = "&lt;b&gt;" + numTask + ".&lt;/b&gt;";
                  }
                }

                function showControlDiv( parent )
                {
                  var div = get("ControlDiv");
                  var x = findPosX( parent );
                  var y = findPosY( parent );

                  div.style.top = ( y - 39 ) + "px";
                  div.style.left = x + "px";
                  div.style.width = ( parent.offsetWidth - 17 ) + "px";
                  div.style.visibility = "visible";
                }
              &lt;/script&gt;

              &lt;form method=post action="blah"&gt;

                &lt;div unselectable=on id=ControlDiv style=" visibility: hidden; position: absolute; top: -1000px; left: -1000px;; padding-top: 3px; padding-left: 15px; background-color: white; border: 1px solid black; border-bottom: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; width: 100%; height: 35px;"&gt;
                  &lt;button unselectable=on style="border: 1px solid black; width: 30px; height: 30px; display: inline; text-align: center; cursor: pointer; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true; document.execCommand( 'Bold' ); return( false );"&gt;&lt;font size=4&gt;&lt;b&gt;B&lt;/b&gt;&lt;/b&gt;&lt;/font&gt;&lt;/button&gt;
                  &lt;button unselectable=on style="border: 1px solid black; width: 30px; height: 30px; display: inline; text-align: center; cursor: pointer; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true; document.execCommand( 'Italic' ); return( false );"&gt;&lt;font size=4&gt;&lt;i&gt;I&lt;/b&gt;&lt;/i&gt;&lt;/font&gt;&lt;/button&gt;
                  &lt;button unselectable=on style="border: 1px solid black; width: 30px; height: 30px; display: inline; text-align: center; cursor: pointer; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true; document.execCommand( 'Underline' ); return( false );"&gt;&lt;font size=4&gt;&lt;u&gt;U&lt;/b&gt;&lt;/u&gt;&lt;/font&gt;&lt;/button&gt;
                  &lt;!-- &lt;button unselectable=on style="border: 1px solid black; width: 30px; height: 30px; display: inline; text-align: center; cursor: pointer; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true; return( false );"&gt;&lt;img src=images/img.bmp&gt;&lt;/button&gt; --&gt;
                  Font Face:
                  &lt;select unselectable=on style="width: 200px; margin-right: 10px;" onclick="JavaScript: event.cancelBubble=true;" onchange="JavaScript: document.execCommand( 'FontName', false, this.value ); return( false );"&gt;
                    &lt;option value="Times New Roman"&gt;Times New Roman&lt;/option&gt;
                    &lt;option value="Courier New"&gt;Courier New&lt;/option&gt;
                    &lt;option value="Tahoma"&gt;Tahoma&lt;/option&gt;
                  &lt;/select&gt;
                  Font Size:
                  &lt;select unselectable=on style="width: 75px;" onclick="JavaScript: event.cancelBubble=true;" onchange="JavaScript: document.execCommand( 'FontSize', false, this.value ); return( false );"&gt;
                    &lt;option value=1&gt;1 (8pt)&lt;/option&gt;
                    &lt;option value=2&gt;2 (10pt)&lt;/option&gt;
                    &lt;option value=3 selected&gt;3 (12pt)&lt;/option&gt;
                    &lt;option value=4&gt;4 (14pt)&lt;/option&gt;
                    &lt;option value=5&gt;5 (18pt)&lt;/option&gt;
                    &lt;option value=6&gt;6 (24pt)&lt;/option&gt;
                    &lt;option value=7&gt;7 (36pt)&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;

                &lt;br&gt;&lt;br&gt;&lt;br&gt;
                &lt;table width=100% onselectstart="JavaScript: return( false );"&gt;
                  &lt;tr&gt;
                    &lt;td width=1% nowrap&gt;&lt;font size=5&gt;&lt;b&gt;Task List:&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;
                    &lt;td width=33% align=center style="color: blue; font-family: Tahoma; cursor: pointer;" onclick="JavaScript: addTask( '', false );"&gt;&lt;font size=5&gt;+&lt;/font&gt;&amp;nbsp;Add Task&lt;/td&gt;
                    &lt;td width=33% align=center style="color: red; font-family: Tahoma; cursor: pointer;" onclick="JavaScript: if( confirm( 'Are you sure you want to delete all tasks from this template?' ) ) deleteAll();"&gt;&lt;font size=2&gt;&lt;b&gt;X&lt;/b&gt;&lt;/font&gt;&amp;nbsp;Delete All&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
                &lt;table width=100% id=TaskTable cellspacing=0 onselectstart="JavaScript: return( false );"&gt;&lt;/table&gt;
              &lt;/form&gt;
              &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/body&gt;
    &lt;/html&gt;
</code></pre>
