如何使div可拖动并在php中恢复false

Question

我有一个div我想拖放另一个div并恢复原来的位置。拖拉5次并恢复后，它会使自身恢复错误并且不会回到原始位置。

我有这段代码：

JS：

  var correctCards = 0;
  var total=0;
  $( init );

  function init() {

    correctCards = 0;       
    var total=0;
    $('#cardPile1').html( '' );
    $('#cardSlots1').html( '' );

    // Create the pile of card 
    var numbers1 = ['a'];
    var words1 = ['aa'];


    // Create the pile of shuffled cards by copy of numbers and sort randomly
    var numbersShuffled1 = numbers1.slice(0).sort( function() { return Math.random() - .5 } );

    // Display words  
    var dragg=0;
    for ( var i=0; i<words1.length; i++ ) {
      $('<div>' + words1[i] + '</div>').data( 'number', i ).appendTo( '#cardSlots1' ).droppable( {
        accept: '#cardPile1 div',
        hoverClass: 'hovered',
        revert: false,
        drop: handleCardDrop1         
      } );
    }

    // Display shuffled list of number
    for ( var i=0; i<numbersShuffled1.length; i++ ) {
      // Get number (index in array) of suffled number
      var numberIndex1 = numbers1.indexOf(numbersShuffled1[i]);
      //alert(numberIndex);

      $('<div>'+ numbersShuffled1[i] + '</div>').data( 'number', numberIndex1 ).attr( 'id', 'cardd'+i ).appendTo( '#cardPile1' ).draggable( {
        containment: '#content10',
        stack: '#cardPile1 div',
        cursor: 'move',
        revert: true
     });
  }
}

function handleCardDrop1( event, ui ) {
  var slotNumber1 = $(this).data( 'number' );
  //alert(slotNumber1);
  var cardNumber1 = ui.draggable.data( 'number' );
}

HTML：

 <div id="cardPile1"> </div>
 <div id="cardSlots1"> </div>