Jquery Drag-Drop (получение элемента в) - PullRequest
Новая
       9

Jquery Drag-Drop (получение элемента в)

0 голосов
/ 19 сентября 2009

Я пытаюсь определить, в какую ячейку сбрасывается объект. 

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

Ответы [ 2 ]

0 голосов
/ 19 сентября 2009

Было бы намного проще, если бы вы сделали ячейку 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>
0 голосов
/ 19 сентября 2009

Я не мог бросить работать внутри клеток - я даже пытался поместить 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>
...