0

我正在一个需要拖放功能的网站上工作。我正在对这个站点上最终教程的代码进行建模。

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

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

我已经检查了报告 FF 的错误，但我似乎没有得到更多关于出了什么问题的信息。

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

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

这是带有相关代码的我的 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，所以我自己加载它只是为了确保它在这里。

4

1 回答 1

1

我注意到您引用的网站使用的是旧版本的 JQuery 1.5.0。当我将 JQuery 文件版本更改为 1.10.3 时，我正在测试的演示页面停止工作（这是根据这里的演示建模的）所以我的建议是使用 1.5.0 版本的 JQuery 进行测试。

如果这不起作用，我会尝试在 WordPress 之外的平台上测试您的代码。根据您使用的插件，可能会有冲突的代码。

于 2013-09-09T19:48:02.133 回答