2017-01-19 1 views
1

체스 판을 만들고 있는데 조각이 떨어지는 테이블 요소를 찾으려고합니다. 불행히도 드롭 이벤트는 전혀 실행되지 않는 것 같습니다. 드롭 이벤트가 발사되지 않는 이유누락 된 요소 찾기

https://jsfiddle.net/thwee3/hhxt84k1/

$('.piece').draggable(); 
$('.pieces').droppable({ 
    drop: function(){ 
    alert($(this).attr('id')); // should give me the number of the field 
    } 
}); 

이것은 내가 지금까지 무엇을, 누군가가 말해 줄 수 있습니까?

답변

2

DIV 요소를 볼 수 높이가 0이다. 그래서 네가 사각형을 떨어 뜨리면 td 요소를 쳐야한다. 작은 div가 아니다.

를 추가해보십시오 CSS

.tile { 
    height: 100%; 
} 

그들은 당신이 만든 오류 가정했다

<td><div id="0" class="field"></div class="tile"></td> 

다음

$('.piece').draggable(); 
$('.tile').droppable({ 
    drop: function(){ 
    alert($(this).attr('id')); // should give me the number of the field 
    } 
}); 

에 코드를 변경하게 귀하의 div의에 클래스 타일을 추가 div 요소는 부모를 채 웁니다. 당신은 좋은 회사에 있습니다. div를 디버깅하는 것에 대해 읽은 최고의 팁은 div에 배경색을 적용하여 예상대로 동작하는 시각적 피드백을 얻는 것이 었습니다. 매우 가치가 있습니다.

+0

필드를'height : 100 %'로 설정하면됩니다. 감사! –

+0

위대한 - 당신의 질문에 '조각'이라고 쓰여져 있지만, 바이올린에서 '들판'을 사용 했으므로 클래스 이름에 대해 조금 분명하지 않았기 때문에 헤딩하여 새 잠재력을 사용하여 그 잠재력을 헤쳐 나갈 것이라고 말했습니다. 발행물. 어쨌든 당신이 고치는 모든 버그는 당신을 더 강하게 만듭니다. –

1

그것은 높이 을 필요로 사업부와 함께 할 또는 사업부를 제거하고

+0

droppable을'.field'로 고정했지만, 이벤트가 전혀 실행되지 않습니다. –

0

귀하의 낙하 할 요소는 ID = "조각"클래스가 아닌 = "조각"인 TD에 ID와 클래스를 사용한다.

당신의 낙하 할 요소

+0

필드를 droppables로 사용하여 첫 번째 오류를 수정했습니다. droppables는 떨어 뜨린 것들입니까, 아니면 뭔가 떨어 뜨린 것들입니까? –

3
$(document).ready(function(){ 
    $('.piece').draggable(); 
    $('.field').droppable({ 
     drop: function(){ 
      alert($(this).attr('id')); 
     } 
    }); 
}); 

에 #board 또는 #pieces를 사용하여 시도하고 CSS를이 추가 :

.field { 
    height:100%; 
} 

가 체스 보드 사각형 demo