为表

Question

到目前为止，我有以下代码：

  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js">
</script>
<title>
        Drag and Drop
</title>
<style>

    #timetable {
        float: left;
        border-collapse: collapse;
        border: 1px solid black;
    }
    #timetable td{
        width: 150px;
        height: 75px;
        border: 1px solid black;

    }
    td div{
        width: 150px;
        height: 75px;
        background-color: #ccc;
    }
    .drag{
        width:150px;
        height:75px;
        border :2px solid red;
    }
    .list{
        float: right;
        border: 1px solid black;
        width: 150px;
        height: 425px;
        overflow: scroll;
    }
</style>
<script>
    $(function(){
        $(".drag").draggable({
            revert: "invalid",
            cursor: "crossshair"
        });
        $(".drop").droppable({
            accept: ".drag",
            hoverClass:"ui-state-highlight",
            tolerance:"pointer",
            drop: function(event,ui){
                console.log("drop");
                $(ui.draggable).detach().css({top:0,left:0}).appendTo($(this));
            }
        });
        $(".list").droppable({
            accept: (".drag"),
            hoverClass:"ui-state-highlight"
        });
    });
</script>

<table id="timetable">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>   
    <tr>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
    </tr>
    <tr>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
    </tr>
    <tr>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
    </tr>
    <tr>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
    </tr>
    <tr>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
        <td><div class="drop"></div></td>
    </tr>
</table>

<div class="list">
    Drag from below:&nbsp;
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

我希望将项目放回并将自己安排到可滚动列区域。物品现在被丢弃但不会自行排列（并且还会改变颜色:(）。

此外，我想知道如何唯一地识别表中要删除项目的单元格，因为我将在我的数据库中创建一个表，该表存储在特定单元格中删除的内容。

任何帮助都会感激不尽。