title: jquery: Variables return NaN
body: <p><strong>Don't let below code scare you away</strong>. The question is really simple, only two lines are making trouble:</p>
  
  <p>Why do my code generated a NaN error code? I am trying to substract one variable value from another so position of elements will be correct.</p>
  
  <p>The variables got their value from jQuery position() which is supposed to be integer anyways.</p>
  
  <p><strong>Check the lines these lines:</strong></p>
  
  <pre><code>// For some reason NaN error code gets generated when line below gets executed.
  var posTop = Startpos.top - Stoppos.top;
  var posLeft = Startpos.left - Stoppos.left;
  </code></pre>
  
  <p><strong>Complete code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /&gt;
      &lt;title&gt;Drag drop 1&lt;/title&gt;
      &lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          var Startpos = new Array;
          var Stoppos = new Array;
  
          // Make images draggable.
          $(".item").draggable({
  
              // Elements cannot go outside #container
              containment: 'parent',
  
              // Make sure the element can only be dropped in a grid.
              grid: [150,150],
  
              // Find original position of dragged image.
              start: function(event, ui) {
  
                  // Make sure picture always are on top when dragged (z-index).
                  $(this).css({'z-index' : '100'});
  
                  // Show start dragged position of image.
                  Startpos = $(this).position();
                  $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
              },
  
              // Find position where image is dropped.
              stop: function(event, ui) {
  
                  // Revert to default layer position when dropped (z-index).
                  $(this).css({'z-index' : '10'});
  
                  // Show dropped position.
                  Stoppos = $(this).position();
                  $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
              }
          });
          $(".item").droppable({
              drop: function(event, ui) {
  
                  // Dragged image gets swapped with dropped on image.
                  var prev_position = "#" + $(this).attr('id');
                  // For some reason NaN error code gets generated when line below gets executed.
                  var posTop = Startpos.top - Stoppos.top;
                  var posLeft = Startpos.left - Stoppos.left;
  
                  // Below variables will work. But unfortunately they
                  // doesn't give the correct numbers for the purpose.
                  // var posTop = Startpos.top;
                  // var posLeft = Startpos.left;
  
                  $(prev_position).css({'top' : posTop, 'left' : posLeft});
  
                  $("div#test").text("Passed variables. Top: " + posTop + " left: " + posLeft);
              }
          });
      });
      &lt;/script&gt;
      &lt;style&gt;
      body {
  
      }
      #container {
          position:relative;
          width:480px;
          border:1px solid #000;
      }
      .item {
          position:relative;
          width:150px;
          height:150px;
          z-index:10;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /&gt;&lt;img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" /&gt;
      &lt;/div&gt;
      &lt;div style="clear:both;"&gt;&lt;/div&gt;
      &lt;div id="start"&gt;Waiting...&lt;/div&gt;
      &lt;div id="stop"&gt;Waiting...&lt;/div&gt;
      &lt;div id="hover"&gt;Waiting...&lt;/div&gt;
      &lt;div id="stop2"&gt;Waiting...&lt;/div&gt;
      &lt;div id="test"&gt;Waiting...&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>