title: jQuery UI draggable/droppable not working
body: <p>I'm working on a site that requires a drag &amp; drop feature. I'm modelling the code off of the <a href="http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/" rel="nofollow">final tutorial on this site</a>.</p>
  
  <p>However, for some reason I keep getting the error: </p>
  
  <p><code>Uncaught TypeError: Object [object Object] has no method 'draggable'</code></p>
  
  <p>I've checked out the error reporting the FF and I don't seem to get any more information about what's gone wrong. </p>
  
  <p>To me it seems like jQuery UI isn't loading correctly.</p>
  
  <p>The site is built on WordPress, I've tried linking the Google version of jQuery UI, as well as a self hosted version and get the same error message.</p>
  
  <p>Here's the my JS file with the relevent piece of code, slightly adapted from the tutorial, if it's of any help to de-bugging. </p>
  
  <pre><code>    /*******************************************************
      ************************************* set up the game */
      var correctCards = 0;
      $( init );
       
      function init() {
       
        // Hide the success message
        $('#successMessage').hide();
       
        // Reset the game
        correctCards = 0;
        
        // Create the pile of shuffled cards
        var numbers = $('.item-image');
               
        for ( var i=0; i&lt;10; i++ ) {
          $('.item-image').data( 'number', numbers[i] ).attr( 'id', 'item-'+numbers[i] ).draggable( {
            containment: '#content',
            stack: '#cardPile div',
            cursor: 'move',
            revert: true
          } );
        }
       
        // Small images
        for ( var i=1; i&lt;=10; i++ ) {
          $('.big-dropzone').data( 'number', i ).droppable( {
            accept: 'img.big-item',
            hoverClass: 'hovered',
            drop: handleCardDrop
          } );
        }
       
      }
  </code></pre>
  
  <p>I haven't altered this code yet</p>
  
  <pre><code>    /*******************************************************
      ********************************* drag and drop stuff */
      function handleCardDrop( event, ui ) {
          var slotNumber = $(this).data( 'number' ); 
          var cardNumber = ui.draggable.data( 'number' );
           
          // If the card was dropped to the correct slot,
          // change the card colour, position it directly
          // on top of the slot, and prevent it being dragged
          // again
           
          if ( slotNumber == cardNumber ) {
              ui.draggable.addClass( 'correct' );
              ui.draggable.draggable( 'disable' );
              $(this).droppable( 'disable' );
              ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
              ui.draggable.draggable( 'option', 'revert', false );
              correctCards++;
              } 
             
              // If all the cards have been placed correctly then display a message
              // and reset the cards for another go
           
          if ( correctCards == 10 ) {
              $('#successMessage').show();
              $('#successMessage').animate( {
                  left: '380px',
                  top: '200px',
                  width: '400px',
                  height: '100px',
                  opacity: 1
              } );
          }
       
      }
  </code></pre>
  
  <p><a href="http://wardrobe.b9media.co.uk" rel="nofollow">The dev site URL is also here</a>.</p>
  
  <p>I'm also calling jQuery and jQuery UI in the footer:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/js/jquery-ui-1.10.3.custom.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I know WP should already load jQuery, however I'm getting a 404 on that file, so I'm loading it myself just to make sure it's here.</p>