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>

При отбрасывании, как мне определить, в какой день был добавлен div?

Answer 1

Я не мог бросить работать внутри клеток - я даже пытался поместить div внутри каждой клетки. Если вы поместите перетаскиваемый div в droppable div, этот код будет работать:

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

Было бы намного проще, если бы вы сделали weekday ячейки сбрасываются - тогда вам не нужно вычислять индекс текущей отброшенной ячейки и искать содержимое ячейки дня недели.

Кроме того, я думаю, что вы должны дать ячейкам ширину и высоту в CSS.

Это, кажется, делает то, что вы хотите, благодаря документации jQuery UI:

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