draggable을 다시 원래 위치로 되 돌리는 방법은 무엇입니까?

Question

jquery의 드래그 가능한 플러그인으로 간단한 드래그 앤 드롭 게임을 만들고 있습니다. (의 나머지 부분과 같은 상상하십시오

예를 들어

<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> 

이 원에 대한 정보는 다음과 같습니다

4 개 모양, 원, 사각형, 삼각형과 별, 그리고 div의에서 지역 오프 4 드롭있다 모양) :

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

지금 재생 클래스 I 재생 버튼. 내 모양을 원래 위치로 되돌리려면 어떻게합니까?

Answer 1

원본 위치를 저장 한 경우 모두 처음부터 다시 작성한 다음 다시 드래그 할 수 있습니다. 가장 쉬운 방법은 물론 페이지를 다시로드하는 것입니다.하지만 그렇게하고 싶지 않다고 가정합니다. 그러므로 나는 여러 가지 방법을 생각할 수 있습니다 : 1) 문서가 준비되면 배열에서 항목을 처음부터 다시 작성할 수있는 충분한 정보를 저장하십시오. 나는 당신에게 4 개의 클래스가 있다고 봅니다 : 원, 사각형, 삼각형, 별. 배열에 ID를 순서대로 저장하십시오.

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

사용자가 재생 버튼을 클릭 할 때마다이 정보를 사용하여 다시 작성합니다.

그러면 DOM이 변경되었으므로 드래그 가능한 함수를 다시 바인딩해야합니다.

2) 동일한 배열을 사용하지만 실제 항목을 해당 위치로 이동하십시오. 이것은 선택자의 악몽이 될 수 있지만 가능합니다. 당신은 항상 VAR에 DOM 요소를 asign, 다음 페이지를 통해 마음대로 이동할 수 있습니다 : EQ와

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

당신은 요소 세트에서 1 차/2 차/등 요소를 선택합니다. 코드가 올바르게 작동하도록 요소를 하나만 선택했는지 확인해야합니다. HTML 코드에서 ID를 반복했다는 것을 고려하십시오. 이것은 당신이 피하고 싶거나, 수업을 바꾸거나, 이런 종류의 조작이 기껏해야 까다로워지기를 원하는 것입니다.