title: jQuery changing CSS inside of a nested function call
body: <p>I'm currently trying to create a drag and drop element which allows me to move an element which it is attached to. Everything is being created dynamically. I'm having a re-occurring problem where I can't change the css from inside a nested function call.</p>
  
  <p><strong>jQuery (Not working)</strong></p>
  
  <pre><code>//Drag begin     
  var dragX;
  var dragY;
  var mouseDown = false;
  var dragIcon = $('&lt;span&gt;')
  .css({
      'z-index' : '11',
      'position' : 'absolute',
      'width' : '300px',
      'height' : '140px',
      'left' : '0px',
      'top' : '20px'
  })
  
  .addClass('unselectable')
  
  .mousedown(function(){
      mouseDown = true;
      $(this).mousemove(function(){
          if(mouseDown == true){
              var dragX = getCurrentMouseX();
              var dragY = getCurrentMouseY();
  
              //Don't allow ideas to be created too close to the border of the page
              if(dragX &lt; 260){
                  dragX = 260;
              }else if(dragX &gt; window.innerWidth - 260){
                  dragX = window.innerWidth - 260;
              }    
  
              if(dragY &lt; 160){
                  dragY = 160;
              } else if(dragY &gt; window.innerHeight - 450){
                  dragY = window.innerHeight - 450;
              }
  
              $(this).css({
                  'left' : dragX - 150,
                  'top' : dragY - 81
              });
          }                
      })
  })
  
  .mouseout(function(){
      mouseDown = false;
  })
  .mouseup(function(){
       mouseDown = false;
  });  
  </code></pre>
  
  <p>I've written the function in JavaScript which works correctly, however i'm trying to convert it to jQuery. The following is the working JavaScript function:</p>
  
  <p><strong>JavaScript (Working)</strong></p>
  
  <pre><code>        //Drag begin     
      var dragX;
      var dragY;
      var mouseDown = false;
  
      //TODO: An icon which can be used to drag the cloud around
      var dragIcon = document.createElement('span');
      dragIcon.style.zIndex = "11";
      dragIcon.style.position = "absolute";
      dragIcon.style.width = "300px";
      dragIcon.style.height = "140px";   
      dragIcon.setAttribute('class', 'unselectable');
      dragIcon.style.left = "0px";
      dragIcon.style.top = "20px";
      dragIcon.unselectable = "on";
      dragIcon.style.MozUserSelect = "none";
  
      dragIcon.onselectstart = function() {return false;}
      dragIcon.onmousedown = function(){
          mouseDown = true;
          dragIcon.onmousemove = function(){
              if(mouseDown == true){
                  var dragX = getCurrentMouseX();
                  var dragY = getCurrentMouseY();
  
                  if(dragX &lt; 260){
                      dragX = 260;
                  }else if(dragX &gt; window.innerWidth - 260){
                      dragX = window.innerWidth - 260;
                  }    
  
                  if(dragY &lt; 160){
                      dragY = 160;
                  } else if(dragY &gt; window.innerHeight - 450){
                      dragY = window.innerHeight - 450;
                  }                           
                  cloudStyle.left = dragX  - 150 + "px"; //-150 to make up for the position of the drag icon
                  sunRay.style.left = dragX - 220 + "px";
                  cloudStyle.top = dragY - 81 + "px"; //-85 to make up for the positioning
                  sunRay.style.top = dragY - 250 + "px"; 
              }
          }
      }
  
      dragIcon.onmouseout = function(){
          mouseDown = false;
      }
      dragIcon.onmouseup = function(){
          mouseDown = false;
      }
  </code></pre>
  
  <p>Can you please point out where i'm going wrong, and whether i'm taking the wrong approach. Thanks. </p>