使用jQuery拖放DIV到第一個位置

Question

我已經設置了可拖動的5個DIV，並通過拖放一個div移動到目標位置。如何設置init函數，以便通過按「再次播放！」丟棄的卡片會在拖放之前回到起始位置。

這裏是鏈接到我的代碼：

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

Answer 1

在您的當前頁面使用：

<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（）函數。您可能不得不將這些功能放在該功能之外，但是這個應用可以讓您瞭解基本設置/