Jquery Drag-Drop (Getting element being dropped into)

Question

I am trying to detect which cell an object is being dropped into.

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

on drop, how do i determine which day the div was dropped into. thanks for any help.

Answer 1

I couldn't get dropping to work inside of cells - I even tried putting divs inside each of the cells. If you drop the draggable div into the droppable div this code will work:

$(".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

It'd be a lot easier if you made the weekday cells droppable — then you don't have to calculate the index of the current dropped cell and look up the contents of the day-of-the-week cell.

Also, I think you need to give the cells a width and height in the CSS.

This seems to do what you want, courtesy of the jQuery UI docs:

<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"&gt;&lt;/script&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;

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

Answer 3

Hey guys, thanks for your help. I think I might have needed to be a little more specific. This is for a custom calendar. The top row is the weekday as mentioned,but each row after is a time, so second row is for 8:00AM, then the next row is 8:30AM, etc. Hence I need the ability to figure out which column it was dropped into. For some reason, $(this) in the drop function references the dragged div, rather than the cell. The reason I've been avoiding modifying the table, is because it is for a previously built web app, for a client. I may just have to tell him I need to change the format of the table, if I can't figure it out. Thanks again.