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 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"></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 Drag-Drop（将元素放入）

2 个答案: