jquery - 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 拖放到可放置的 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>