<!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. iframe伪造ajax

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. centos下查看端口占用情况，杀死进程

    第一种:我们知道端口号用下面这种方法 有时候我们知道某个服务端口正在后台运行,想关掉它.比如说我tomcat是8080端口,在后台运行.怎么关掉它呢? 根据端口查看这个进程的pid netstat - ...

  3. 我的日志分析之道：简单的Web日志分析脚本

    前言 长话短说,事情的起因是这样的,由于工作原因需要分析网站日志,服务器是windows,iis日志,在网上找了找,github找了找,居然没找到,看来只有自己动手丰衣足食. 那么分析方法我大致可分为 ...

  4. aop（Aspect Oriented Programming）面向切面编程

    AOP,一个oop的后传,面向切面,一个基于代理模式的机制. 举例子把:说原理很难理解, 吃饭:谁都得吃饭,一个老师类,有吃饭的方法.一个学生类,也得有吃饭的方法.是不是都得实现这个方法?构建一个pe ...

  5. pyqt5-多线程QThread类

    要实现多线程,我们要先继承QThread类并重新实现其中的run()函数,也就是说把耗时的操作放入run()函数中 import sys from PyQt5.QtCore import Qt, QT ...

  6. 第18月第22天 机器学习first

    1.网易公开课 机器学习   http://open.163.com/special/opencourse/machinelearning.html https://github.com/search ...

  7. Node.js的基本操作(使用Vue前必学)

    安装 Windows下不需要讲,Mac下的安装步骤: https://www.cnblogs.com/bobi1234/category/1367458.html 全局安装淘宝镜像 npm insta ...

  8. I - Older Brother Gym - 101490I

    题目链接:https://cn.vjudge.net/problem/Gym-101490I 题目大意:给你一个整数,问你这个整数能不能表示成一个素数的k次方? 具体思路:对于每一个数,我们先判断他是 ...

  9. Python 入门基础20 --面向对象_继承、组合

    今日内容 组合:自定义类的对象作为类的属性 继承:父类与子类.多继承 1.组合 将自定义类的对象作为类的属性 class Teacher: def __init__(self, name): self ...

  10. Android数据存储五种方式

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