Блог

Я установил возможность перетаскивания для 5 разделов, и при каждом перетаскивании один div перемещается в целевое место. Как я могу настроить функцию инициализации так, чтобы при нажатии кнопки «Воспроизвести еще раз!» выпавшая карта возвращалась туда, где она была в начале перед перетаскиванием.

Вот ссылка на мой код:

http://jsfiddle.net/k9NXv/2/

 function init()
{
      $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );
    //Resetting the game
    var faces = ['happy','mad','sad','worried','guilty'];


    for (var i=0;i<5;i  )
    {
        $('#'   faces[i]   '').draggable({

            stack: '#faceSlot',
            cursor: 'move',
            revert: true
      });
    }

        $('#faceSlot').droppable({
                hoverClass: 'hovered',
                drop: handleCardDrop
                });
};
  

На текущей странице используйте:

 <div id="mainContainer"> 
</div>
$(load);
function load(){
$.get( "../YourContent.html", function( data ) {
  $( "#mainContainer" ).html( data );
  $(init);
});
}
  

Создайте отдельную страницу под названием: YourContent.html
На этой странице представлены:

 function init()
{
      $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );
    //Resetting the game
    var faces = ['happy','mad','sad','worried','guilty'];


    for (var i=0;i<5;i  )
    {
        $('#'   faces[i]   '').draggable({

            stack: '#faceSlot',
            cursor: 'move',
            revert: true
      });
    }

        $('#faceSlot').droppable({
                hoverClass: 'hovered',
                drop: handleCardDrop
                });
};

function handleCardDrop(event,ui) 
{
    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 );
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
   $(load);
};
  

Таким образом, когда ваша страница загружается, она использует функцию Load() для извлечения страницы со сценарием и игрой на ней, когда вы хотите сбросить игру, вы просто вызываете функцию load() . Возможно, вам придется оставить свои объекты вне этой функции, но это должно дать вам представление о базовой настройке/