如何將draggable恢復到原始位置？

Question

我正在用jQuery的可拖動插件創建一個簡單的拖放遊戲。

有4種形狀，圓形，方形，三角形，星形，和4落客區中的div：

<div class="drag"> 
    <div class="container"> 
     <div id="circle"></div> 
    </div> 
    <div class="container"> 
     <div id="square"></div> 
    </div> 
    <div class="container"> 
     <div id="triangle"></div> 
    </div> 
    <div class="container"> 
     <div id="star"></div> 
    </div> 
</div> 
<div class="drop"> 
    <div class="container"> 
     <div id="circle"></div> 
    </div> 
    <div class="container"> 
     <div id="square"></div> 
    </div> 
    <div class="container"> 
     <div id="triangle"></div> 
    </div> 
    <div class="container"> 
     <div id="star"></div> 
    </div> 
</div> 

例如，這是圓的信息（請想象一下用的，其餘相同形狀）：

function init() { 
$('.drag #circle').data('shape','circle').draggable({ 
    cursor: 'move', 
    stack: '#circle', 
    revert: true 
}); 
    $('.drop #circle').data('shape','circle').droppable({ 
     accept: '#circle', 
     drop: handleDropEvent 
    }); 
}; 
init(); 

這是把手放開事件：

function handleDropEvent(event, ui) { 
    var item = $(this).data('shape'); 
    var drop = $(this).data('shape'); 
    var dragItem = ui.draggable; 
    if (item==drop){ 
     dragItem.position({ of: $(this), my: 'left top', at: 'left top' }); 
     dragItem.draggable('option', 'revert', false); 
     dragItem.draggable('disable'); 
     $(this).droppable('disable'); 
     correctMatch++; 

    } 
    if (correctMatch == 4) { 
     $('.replay').show(); 
     $('.replay').click(function(){ 
      init(); 
     }); 
    } 
} 

現在在重播類我是一個重播按鈕。我如何讓形狀恢復到原來的位置？

Answer 1

如果您保存了原始位置，然後再將其全部拖放，您可以從頭開始重建所有內容。最簡單的方法當然是重新加載頁面，但我假設你不想這樣做。因此，我可以想到幾種方法： 1）當文檔準備就緒時，保存足夠的信息以從頭開始重建數組中的項目。我看到你有四類：圓形，方形，三角形和星星。只需將ID按順序存儲在一個陣列中

var initial_state=['circle', 'square', 'triangle', 'star'] 

然後每當用戶單擊重放按鈕時使用此信息進行重建。

$('.drag, .drop').html('')//Clean up the containers 
var a=''; 
for (i in initial_state){ 
    a+='<div class="container" ><div id="'+i+'"></div></div>';//generate the html to append 
} 
$('.drag, .drop').append(a);//append it to the containers 

那麼你將不得不再次綁定可拖動函數，因爲DOM已經改變了。

2）使用相同的數組，但移動實際項目到他們的位置。這可能會成爲選擇器的噩夢，但這是可能的。您可以隨時ASIGN DOM元素的變種，然後在將通過頁面移動它：

var circle= $('.drag.container #star').eq[0] 

隨着EQ選擇從一組元素的第一/第二/等元素。你必須確保你只選擇了一個元素讓你的代碼正常運行。考慮到你的html代碼中有重複的id。這是你想避免的，將它們改爲類，或者這種操作最多也會變得棘手。