Jquery 끌어서 놓기 (요소 가져 오기 중)

Question

개체가 떨어지는 셀을 감지하려고합니다.

<table> 
<tr> 
<td class="weekday">Sun</td> 
<td class="weekday">Mon</td> 
<td class="weekday">Tue</td> 
<td class="weekday">Wed</td> 
<td class="weekday">Thu</td> 
<td class="weekday">Fri</td> 
<td class="weekday">Sat</td> 
</tr> 
<tr> 
<td class="droppable">&nbsp;</td> 
<td class="droppable">&nbsp;</td> 
<td class="droppable">&nbsp;</td> 
<td class="droppable">&nbsp;</td> 
<td class="droppable">&nbsp;</td> 
<td class="droppable">&nbsp;</td> 
<td class="droppable">&nbsp;</td> 
</tr> 
</table> 

<div class="draggable">Drag Me</div> 

드롭 다운시, div가 드롭 된 날짜를 어떻게 결정합니까?

Answer 1

나는 세포 내부에서 작동하지 않을 수 없었다. 심지어 각 셀 안에 div를 넣어 보았다. 당신이 낙하 할 DIV로 드래그 DIV를 드롭하면이 코드가 작동합니다 : 당신이 weekday 세포가 낙하 할 만든 경우

$(".draggable").draggable(); 
$(".droppable").droppable({ 
    drop: function(event, ui) { 
     $(this).html('Dropped!'); 
    } 
}); 

<table> 
    <tr> 
     <td class="weekday">Sun</td> 
     <td class="weekday">Mon</td> 
     <td class="weekday">Tue</td> 
     <td class="weekday">Wed</td> 
     <td class="weekday">Thu</td> 
     <td class="weekday">Fri</td> 
     <td class="weekday">Sat</td> 
    </tr> 
    <tr> 
     <td><div class="droppable">empty</div></td> 
     <td><div class="droppable">empty</div></td> 
     <td><div class="droppable">empty</div></td> 
     <td><div class="droppable">empty</div></td> 
     <td><div class="droppable">empty</div></td> 
     <td><div class="droppable">empty</div></td> 
     <td><div class="droppable">empty</div></td> 
    </tr> 
</table> 

<div class="droppable">drop in me!</div> 

<div class="draggable">Drag Me</div> 

Answer 2

그것은 훨씬 쉽게 될 것입니다 - 당신은 현재의 인덱스를 계산하지 않아도 셀을 삭제하고 요일 셀의 내용을 조회합니다.

또한 CSS에서 너비와 높이를 지정해야한다고 생각합니다.

<style type="text/css"> 
    td { 
     width: 4em; 
     height: 4em; 
     margin: 3px; 
    } 
    td.weekday { 
     background: #fcc; 
    } 
    td.droppable { 
     background: #ccf; 
    } 
    div.draggable { 
     background: #cfc; 
     padding: 1em; 
     width: 10em; 
    } 
</style> 

<table> 
    <tr> 
     <td class="weekday">Sun</td> 
     <td class="weekday">Mon</td> 
     <td class="weekday">Tue</td> 
     <td class="weekday">Wed</td> 
     <td class="weekday">Thu</td> 
     <td class="weekday">Fri</td> 
     <td class="weekday">Sat</td> 
    </tr> 
</table> 

<div class="draggable">Drag Me</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
    $(".draggable").draggable(); 
    $(".weekday").droppable({ 
     drop: function() { 
      alert($(this).text()); 
     } 
    }); 
</script> 

:

이것은 jQuery UI docs의 의례, 당신이 원하는 것을 할 것 같다