<!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. How to get API key (APPID)

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  2. exportfs命令

    exportfs命令:功能说明 :NFS共享管理 语法格式 exportfs [必要参数][选择参数][目录] 功能描述 exportfs 命令:用于管理NFS(Network File System ...

  3. 在SpringBoot2.0及Spring 5.0 WebMvcConfigurerAdapter已被废弃，目前找到解决方案就有两种

    1 直接实现WebMvcConfigurer (官方推荐) 例如: @Configuration public class WebMvcConfg implements WebMvcConfigure ...

  4. python---memcache基本使用以及内部原理

    简单使用: import memcache mc = memcache.Client(['127.0.0.1:8081','127.0.0.1:8082','127.0.0.1:8083','127. ...

  5. docker入门（三）

    docker容器IP"暴露"到外网(宿主机外) 首先将docker容器IP固定 Docker自身的4种网络工作方式,简略说明下: host模式,使用--net=host指定. co ...

  6. tessaract ocr简介

    Tesseract的历史Tesseract是一个开源的OCR引擎,惠普公司的布里斯托尔实验室在1984-1994年开发完成.起初作为惠普的平板扫描仪的文字识别引擎.Tesseract在1995年UNL ...

  7. js 将很长的内容进行页面分页显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 字体选择框QFontComboBox

    self.combobox_2 = QFontComboBox(self)  # 实例化字体列表框 combobox.currentFont()  返回字体选择框中当前的字体 self.combobo ...

  9. js取最大最小值

    链接:https://www.cnblogs.com/waitingbar/p/4323600.html js取最小最大值--Math.min().math.max() 一.Math.min() 返回 ...

  10. More Effective C++ 条款0，1

    More Effective C++ 条款0,1 条款0 关于编译器 不同的编译器支持C++的特性能力不同.有些编译器不支持bool类型,此时可用 enum bool{false, true};枚举类 ...