<!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. jenkins+gitlab webhooks 实现自动触发打包

    说明:实现代码在gitlab上的提交后立马自动进行jenkins的job构建 安装插件: Gitlab Hook Plugin  Build Authorization Token Root Plug ...

  2. 金融量化分析【day113】：PGEC策略

    一.PGE简介 二.PGE代码 # 导入函数库 import jqdata import pandas as pd def initialize(context): set_benchmark('00 ...

  3. win7屏蔽ctrl+alt+up/down快捷键/ (eclipse冲突)

    win7屏蔽ctrl+alt+up/down快捷键/   Eclipse有个非常好用的快捷键(当然Eclipse好用的快捷键有N个)Ctrl+Alt+UP/DOWN,用于复制当前行的内容,用法很简单, ...

  4. bzoj千题计划298：bzoj3997: [TJOI2015]组合数学

    http://www.lydsy.com/JudgeOnline/problem.php?id=3997 最小链覆盖=最长反链长度 所以题目等价于寻找一条从右上角到左下角的最长路 #include&l ...

  5. Neural Networks and Deep Learning（week4）Deep Neural Network - Application（图像分类）

    Deep Neural Network for Image Classification: Application 预先实现的代码,保存在本地 dnn_app_utils_v3.py import n ...

  6. Nginx管理脚本

    #!/bin/bash # chkconfig: # description: Start/Stop Nginx server path=/application/nginx/sbin pid=/ap ...

  7. 四、移植 JZ2440 开发板

    4.1 移植第一步 前面已经分析过了 .config 的过程,可以知道移植需要用到的文件: .config 文件 arch/arm/cpu 下的文件 board 目录  .config 文件是根据后面 ...

  8. 一、linux IO 编程---内存管理

    1.1 进程在虚拟空间中的布局 32位的操作系统虚拟空间的大小为 4GB,即每个进程在系统中分配的虚拟空间大小为4GB.这4GB的大小被分为了两个部分: 内核空间:1GB,内核起的进程 用户空间:3G ...

  9. MySQL自动设置create_time和update_time

    参考表结构 CREATE TABLE `t_baby` ( `baby_id` int(11) NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL, ...

  10. Mysql被攻击

    日志: show global variables like '%general%'; set global general_log=on; 默认Path:/var/run/mysqld/mysqld ...