学校课程表

我们这一节的课的主要内容讲的是实现对学校课程表的安排。主要是通过拖放组件来完成。如下图所示完成后的样式：

首先我们先来实现学校所有的课程：

<div class="left">
            <table>
                <tr><td><div class="item">English</div></td></tr>
                <tr><td><div class="item">Science</div></td></tr>
                <tr><td><div class="item">Music</div></td></tr>
                <tr><td><div class="item">History</div></td></tr>
                <tr><td><div class="item">Computer</div></td></tr>
                <tr><td><div class="item">Mathematics</div></td></tr>
                <tr><td><div class="item">Arts</div></td></tr>
                <tr><td><div class="item">Ethics</div></td></tr>
            </table>
        </div>

显示时间表

<div class="right">
            <table>
                <tr>
                    <td class="blank"></td>
                    <td class="title">Monday</td>
                    <td class="title">Tuesday</td>
                    <td class="title">Wednesday</td>
                    <td class="title">Thursday</td>
                    <td class="title">Friday</td>
                </tr>
                <tr>
                    <td class="time">08:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="time">09:00</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <!-.............-->
            </table>
        </div>

拖动在左侧的学校科目

$('.left .item').draggable({
        revert:true,
        proxy:'clone'
    });

放置学校科目在时间表单元格上

$('.right td.drop').droppable({
        onDragEnter:function(){
            $(this).addClass('over');
        },
        onDragLeave:function(){
            $(this).removeClass('over');
        },
        onDrop:function(e,source){
            $(this).removeClass('over');
            if ($(source).hasClass('assigned')){
                $(this).append(source);
            } else {
                var c = $(source).clone().addClass('assigned');
                $(this).empty().append(c);
                c.draggable({
                    revert:true
                });
            }
        }
    });