jQuery UI 可拖动/可拖放不起作用

我正在开发一个需要拖放功能的网站。我正在根据此站点上的最后一个教程对代码进行建模。

但是，由于某种原因，我不断收到错误：

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

我已经检查了报告FF的错误，但我似乎没有获得有关出错的更多信息。

对我来说，jQuery UI似乎没有正确加载。

该网站建立在WordPress上，我尝试链接Google版本的jQuery UI以及自托管版本，并收到相同的错误消息。

这是我的JS文件，其中包含相关的代码段，稍微改编自教程，如果它对消除错误有任何帮助的话。

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

我还没有更改此代码

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

开发人员站点 URL 也在此处。

我还在页脚中调用 jQuery 和 jQuery UI：

<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>

我知道WP应该已经加载了jQuery，但是我在该文件上得到了404，所以我自己加载它只是为了确保它在这里。