movable div code - everytime I click the one on the right, it automatically repositions to left
<p>I have a javascript code that I have incorporated to control two different movable div id's.  The one on the left works fine because the starting is top left; however, the one on the right side of the page gets messed up everytime I try to move it.  Is it something in the javascript code?  How do I fix this?</p>

<p>HTML</p>

<pre><code>&lt;div id="fm1" style="left: 0; top: 25px;" onMouseDown="dragStart(event, 'fm1')";&gt;
  &lt;p&gt;Site Editor&lt;/p&gt;
&lt;a href="#"&gt;Add a page&lt;/a&gt;
&lt;a href="#"&gt;Change page order&lt;/a&gt;
&lt;a href="#"&gt;Change colors&lt;/a&gt;
&lt;/div&gt;

&lt;div id="fm2" style="right: 0; top: 25px;" onMouseDown="dragStart(event, 'fm2')";&gt;
  &lt;p&gt;Page Editor&lt;/p&gt;
&lt;a href="#"&gt;Change Layout&lt;/a&gt;
&lt;a href="#"&gt;Change Page Name&lt;/a&gt;
&lt;a href="#"&gt;Password Protect&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#fm1, #fm2 {
width: 160px;
position: fixed;
background-color: #000;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #FFF;
cursor: move;
z-index: 999999999;
}
#fm1 a, #fm2 a {
float: left;
display: block;
width: 160px;
height: 25px;
font-weight: bold;
text-align: center;
color: #fff;
background: #000;
border-top: 1px solid #fff;
}
#fm1 a:hover, #fm2 a:hover { background: #1e7c9a; }
</code></pre>

<p>javascript</p>

<pre><code> function getID(id)
    {
        return document.getElementById(id);
    }
    // Global object to hold drag information.
    var dragObj = new Object();
    function dragStart(event, id) {
      var x, y;
      dragObj.elNode = getID(id);
      // Get cursor position with respect to the page.
      try {
        x = window.event.clientX + document.documentElement.scrollLeft
          + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
          + document.body.scrollTop;
      }
      catch (e) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
      }
    // Save starting positions of cursor and element.
     dragObj.cursorStartX = x;
      dragObj.cursorStartY = y;
      dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
      dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
      if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
      if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
      // Capture mousemove and mouseup events on the page
      try {
        document.attachEvent("onmousemove", dragGo);
        document.attachEvent("onmouseup",   dragStop);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
      }
      catch (e) {
        document.addEventListener("mousemove", dragGo,   true);
        document.addEventListener("mouseup",   dragStop, true);
        event.preventDefault();
      }
    }
    function dragGo(event) {
     var x, y;
    // Get cursor position with respect to the page.
    try  {
        x = window.event.clientX + document.documentElement.scrollLeft
          + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
          + document.body.scrollTop;
      }
      catch (e) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
      }
      // Move drag element by the same amount the cursor has moved.
      var drLeft = (dragObj.elStartLeft + x - dragObj.cursorStartX);
      var drTop = (dragObj.elStartTop  + y - dragObj.cursorStartY);
      if (drLeft &gt; 0)
      {
         dragObj.elNode.style.left = drLeft  + "px";
      }
      else
      {
        dragObj.elNode.style.left = "0px";
      }
      if (drTop &gt; 0)
      {
         dragObj.elNode.style.top  = drTop + "px";
      }
      else
      {
        dragObj.elNode.style.top  = "0px";
      }
      try {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
      }
      catch(e){
        event.preventDefault();
      }
    }
    function dragStop(event) {
      // Stop capturing mousemove and mouseup events.
      try {
        document.detachEvent("onmousemove", dragGo);
        document.detachEvent("onmouseup",   dragStop);
      }
      catch (e) {
        document.removeEventListener("mousemove", dragGo,   true);
        document.removeEventListener("mouseup",   dragStop, true);
      }
    }
</code></pre>

<p>Note:  Once the one of the right repositions, I have full control to move it around.  I just don't want it to automatically jump to the left side of the page the moment its moved for the first time.</p>
