Jquery Drag-Drop（要素をドロップする）

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> 

落ち込んでいるとき、どの曜日に落としたのか分かりません。

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の礼儀、あなたがやりたいように見えます