jQuery UI draggable/droppable not working

Question

I'm working on a site that requires a drag & drop feature. I'm modelling the code off of the final tutorial on this site.

However, for some reason I keep getting the error:

Uncaught TypeError: Object [object Object] has no method 'draggable'

I've checked out the error reporting the FF and I don't seem to get any more information about what's gone wrong.

To me it seems like jQuery UI isn't loading correctly.

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.

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.

    /*******************************************************
    ************************************* 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<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<=10; i++ ) {
        $('.big-dropzone').data( 'number', i ).droppable( {
          accept: 'img.big-item',
          hoverClass: 'hovered',
          drop: handleCardDrop
        } );
      }
     
    }

I haven't altered this code yet

    /*******************************************************
    ********************************* 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
            } );
        }
     
    }

The dev site URL is also here.

I'm also calling jQuery and jQuery UI in the footer:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-ui-1.10.3.custom.min.js"></script>

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.

Answer 1

I notice the website you are referencing they use an older version of JQuery 1.5.0. When I changed the JQuery file version to 1.10.3 the demo page I was testing stopped working (which was modeled off of this demo here) so my suggestion would be to test with the 1.5.0 version JQuery.

If that doesnt work I would try testing your code on platform that is outside of WordPress. Depending on what plugins you are using there could be conflicting code.