2014-04-06 5 views
1

jquery를 사용하여 드래그 앤 드롭 게임을하고 있습니다.jquery를 사용하여 대상으로 드래그 앤 드롭

게임의 목적은 그림을 대상 div로 드래그하는 것입니다.

그림을 div 대상으로 끌 때 .... "수정"또는 "잘못된"경고를 표시하지만 제대로 작동하지 않습니다.

 <img src="1.png" id="answer1"> 
     <img src="2.png" id="answer2"> 
     <img src="3.png" id="answer3"> 

     <div id="target1"> 
      drop here 

     <script> 
     $("#answer1").draggable(); 
     $("#answer2").draggable(); 
     $("#answer3").draggable(); 
     $("#target1").droppable({ 
    drop: function() { 

       if($("#target1:has(img.answer1)").length > 0) 
         { 

          alert('Correct'); 

         } 
        else 
         { 
          alert('Incorrect'); 
         } 



        } 

           }); 

</script> 

     </div> 

을하지만 항상

내 코드의 문제점은 무엇입니까 ("잘못된") 경고를하고 두 번째 조건에 들어갑니다

나는 다음과 같이 할 노력하고있어?

+3

Er,'img # answer1', ID가 아닌 클래스 – adeneo

답변

2

드래그 한 요소의 ID를 확인하려면 drop 이벤트 : ui.draggable.attr("id")의 요소 ID를 드래그 할 수 있습니다.

그래서 당신은 Fiddle에서 라이브 데모를 확인하실 수 있습니다

$("#answer1").draggable(); 
$("#answer2").draggable(); 
$("#answer3").draggable(); 
$("#target1").droppable({ 
drop: function(event, ui) { 
     if(ui.draggable.attr("id")=='answer1') 
     { 
       alert('Correct'); 
     } 
     else 
     { 
       alert('Incorrect'); 
     }  
    } 
}); 

로 스크립트를 변경합니다.

+0

고맙습니다. ....... 이렇게하면 여러 날 동안 나를 때리 게 만듭니다. < – Beer

+0

@ user3497359 당신을 기쁘게 생각합니다. 잊지 마세요. 답변으로 표시하십시오. 답변 옆에있는 체크 표시를 클릭하여 빈에서 녹색으로 토글 할 수 있습니다. –