<!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. nodejs实现新闻爬虫

    作为费德勒的铁杆粉丝,每天早上都会在新浪体育里面的网球频道浏览费德勒新闻.由于只关注费德勒的新闻,所以每次都要在网页中大量的新闻中筛选相关信息,感觉效率好低,所以用node写了一个简单的爬虫程序通过每 ...

  2. Forth 语言概要 - Forth: An underview

    Forth 语言概要 - Forth: An underview 原作者 Peter Knaggs 原文标题< Forth: An underview > 译者: 未知 译文链接: htt ...

  3. 20155332 2016-2017-2 《Java程序设计》第8周学习总结

    20155332 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 创建Logger对象 static Logger getLogger(String name ...

  4. 关于JS事件冒泡与JS事件代理（事件委托）

    连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...

  5. POJ 2513 Colored Sticks （欧拉回路+并查集+字典树）

    题目链接 Description You are given a bunch of wooden sticks. Each endpoint of each stick is colored with ...

  6. Native、Web App、Hybrid、React Native（简称RN）、Weex 间的异同点。

    App常用开发模式简介 此处App为应用application,并非我们通常讲的手机App. 常用的几种APP开发模式-脑图 Native App 传统的原生App开发模式,有iOS和aOS两大系统, ...

  7. linux C sscanf()函数

    linux sscanf() 类似正则表达式,又不完全是正则表达式. 分割 ”/“ 或 "@" 或空格 要用 [^/] 例如: sscanf("iios/12DDWDFF ...

  8. windows钩子函数

    一 什么时候用到钩子?(when)Windows操作系统是建立在事件驱动的消息处理机制之上,系统各部分之间的沟通也都是通过消息的相互传递而实现的.通常情况下,应用程序只能处理当前进程的消息,如果需要对 ...

  9. Android数据存储五种方式

    1 使用SharedPreferences存储数据:常用于做本地缓存 2 文件存储数据:(1)data/data/<package name>/files目录内   (2)SDCard内 ...

  10. Bootstrap模态框（一个页面显示多个）的使用

    在一个页面显示多个模态框时要讲每个模态框用div包裹起来,否咋会产生格式错误. <html> <head> <meta charset="utf-8" ...