Question

我正在开发一个需要拖放的网站。掉落功能。我正在对final tutorial on this site。

的代码进行建模

但是，出于某种原因，我一直收到错误：

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

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

对我而言，似乎jQuery UI无法正确加载。

该网站建立在WordPress上，我尝试链接谷歌版本的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
            } );
        }
     
    }

The dev site URL is also here

我也在页脚中调用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，所以我自己加载它只是为了确保它在这里。

Answer 1

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

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

jQuery UI draggable / droppable无法正常工作

1 个答案: