<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>拖动课程表</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            //拖动左边的课程
            $('.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
                        });
                    }
                }
            });
        })
    </script>
    <style>
        .left{
            float: left;
            margin-left: 300px;
            background-color:#4b72a4;
            color: #fff;
        }
        .left td{
            border: 1px solid #000000;
        }

        .right{
            margin: 100px 400px;
            background-color: #b3b3b3;
            color: #fff;
        }
        .item{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="left">
    <table class="t1">
        <tr>
            <td><div class="item">英语</div></td>
        </tr>
        <tr>
            <td><div class="item">数学</div></td>
        </tr>
        <tr>
            <td><div class="item">体育</div></td>
        </tr>
        <tr>
            <td><div class="item">政治</div></td>
        </tr>
        <tr>
            <td><div class="item">历史</div></td>
        </tr>
        <tr>
            <td><div class="item">地理</div></td>
        </tr>

    </table>
</div>

<div class="right">
    <table  class="table table-bordered">
        <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>
        <tr>
            <td class="time">10: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">11: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">14: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>
</body>
</html>

easyUI拖动课程进课程表的更多相关文章

  1. easyUI拖动购物车案例

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  2. easyUI拖动：draggable()方法运用

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>de ...

  3. jQuery UI 之 EasyUI 快速入门

    jQuery EasyUI 基础 转载自(http://www.shouce.ren/api/view/a/3350) jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面 ...

  4. EasyUi TreeGrid封装

    礼物一:树型实体的抽象与封装 所谓树型实体,就是具有树型结构关系的实体,比如省.市.区.对于初学者,可能会创建三张表进行存储,有经验的开发者通过引入ParentId将设计简化为一张表,但是基于Pare ...

  5. nginx+jwplayer配置flv/MP4点播系统, 视频拖动支持

    一 配置nginx 1. 下载 nginx 最新版 http://nginx.org/ 2. 安装依赖库, 以ubuntu为例 apt-get install libpcre3 libpcre3-de ...

  6. [转]ORACLE递归查询

    转自:http://www.oracle.com/technetwork/cn/articles/hartley-recursive-086819-zhs.html 递归数据库处理,也称为材料清单 或 ...

  7. 应用程序框架实战三十六:CRUD实战演练介绍

    从本篇开始,本系列将进入实战演练阶段. 前面主要介绍了一些应用程序框架的概念和基类,本来想把所有概念介绍完,再把框架内部实现都讲完了,再进入实战,这样可以让初学者基础牢靠.不过我的精力很有限,文章进度 ...

  8. 应用程序框架实战三十四:数据传输对象(DTO)介绍及各类型实体比较

    本文将介绍DDD分层架构中广泛使用的数据传输对象Dto,并且与领域实体Entity,查询实体QueryObject,视图实体ViewModel等几种实体进行比较. 领域实体为何不能一统江湖? 当你阅读 ...

  9. 应用程序框架实战三十三:表现层及ASP.NET MVC介绍（二）

    最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和Asp.net Mvc,我将在本篇讨论一些 ...

随机推荐

  1. printf()格式化输出详解

    % - 0 m.n l或h 格式字符 下面对组成格式说明的各项加以说明: ①%:表示格式说明的起始符号,不可缺少. ②-:有-表示左对齐输出,如省略表示右对齐输出. ③0:有0表示指定空位填0,如省略 ...

  2. ansible-playbook 变量（vars）

    变量优先级: ansible-playbook中定义变量: - hosts: webservers vars: http_port: 80 ①.在host里定义变量 执行结果: ②.使用var_fil ...

  3. 9、Python-文件操作

    打开关闭文件 # 打开一个已经存在的文件,或者创建一个新文件 f = open('test.txt', 'w') # 关闭这个文件 f.close() 访问模式 说明 r 以只读方式打开文件.文件的指 ...

  4. mysql用户权限分配专栏

    00x1创建新用户 通过root用户登录之后创建 创建新用户,用户名为testuser,密码为123456 : 1 grant all privileges on *.* to testuser@lo ...

  5. tcp.validnode_checking踩过的坑

    对Oracle 检查ip合法性,就必须在服务器端的sqlnet.ora文件中设置如下参数 TCP.INVITED_NODES=(10.0.0.36,10.0.0.1,10.0.0.35) TCP.EX ...

  6. oozie JAVA Client 编程提交作业

    1,eclipse环境搭建 在eclipse中新建一个JAVA工程,导入必要的依赖包,目前用到的有: 其次编写JAVA 程序提交Oozie作业,这里可参考:oozie官方参考文档 在运行提交程序前,首 ...

  7. vue自学入门-2（vue创建项目）

    本人也是刚学习VUE,边找资料,边学习,边给大家分享.1.创建项目 2.启动项目 3.注意上面和下面全部用cnpm

  8. 四、NAND Flash

    4.1 nand flash启动u-boot nand flash 启动的时候,CPU 需要将 nand flash 中前面 4KB 的内容复制到 SRAM 中执行,然后将 NAND Flash 中的 ...

  9. CSS——margin

    CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...

  10. c#中如何在一个panel中放入窗体

    Form2 f2 = new Form2(); //实例化窗体FORM2 f2.TopLevel = false; //设置为非顶级窗体 f2.FormBorderStyle = FormBorder ...