4 课程表制作

这个教程将显示如何通过EasyUI创建一个课程表。我们将创建两个表格：左边为课程，右边为课程表。你可以拖动课程放置在课程表的单元格中。下面是官方网站示例：

http://www.jeasyui.com/tutorial/dd/dnd3_demo.html

4.1 显示课程

在body标签中创建两个课程，如下：

<div class="left">  
   <table>  
       <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>

设置课程外观，在head中插入：

<style type="text/css">
.item{
	text-align:center;
	border:1px solid #499B33;
	background:#fafafa;
	width:100px;
}
.left{
	width:120px;
	float:left;
}
.left table{
	background:#E0ECFF;
}
.left td{
	background:#eee;
}
</style>

4.2  显示课程表

<div class="right">  
   <table>  
       <tr>  
          <td class="blank"></td>  
          <td class="title">星期一</td>  
          <td class="title">星期二</td>  
          <td class="title">星期三</td>  
          <td class="title">星期四</td>  
          <td class="title">星期五</td>  
        </tr>  
        <tr>  
          <td class="time">08:05—09:45</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—11:40</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:25—16:05</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">16:15—17:55</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">19:30—21:10</td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
          <td class="drop"></td>  
       </tr>         
   </table>  
</div>

设置课程表外观：

.right{
	float:right;
	width:570px;
}
.right table{
	background:#E0ECFF;
	width:100%;
}
.right td{
	text-align:center;
	padding:2px;
	background:#E0ECFF;
}
.right td.drop{
	background:#fafafa;
	width:100px;
}

4.3 设置左边课程拖放效果

在head插入JS代码：

<script type="text/javascript">
$(function(){
	//设置class为item的div拖放效果
	$('.left .item').draggable({  
    revert:true,//放开时，拖动的div回到原位
    proxy:'clone' //拖动效果为复制
});   
});
</script>

4.4 让课程表接收拖动元素

//设置课程表单元格接收拖动元素
$('.right td.drop').droppable({
	
});

此时，运用了drop样式的td都能接收拖动元素了。下面只需容器（课程表）接收元素后将课程信息显示在课程表的td中即可。onDrop事件表示当可拖动元素被拖入目标容器并放置的时候触发，因此可以在此事件中调用方法来处理显示课程信息。

//拖动元素置容器（表格中运用了样式drop的td）中 
onDrop:function(e,source){
	//拷贝拖动的元素，避免课程信息丢失，同时设置以放置课程容器的样式
	var c = $(source).clone().addClass('assigned');
	//来先清空存在课程，再将元素放入td中
	$(this) .empty().append(c); 
}

设置放置课程容器的样式：

.assigned{
	border:1px solid #BC2A4D;
}

现在可以随意拖动左边的课程信息到课程表中去了，并可以覆盖原有课程，但是想要修改课程表呢？很明显课程表中的课程不能拖动，现在给拷贝的拖动元素设置可拖动效果。

c.draggable({
	revert:true  //若未被容器接收，放开时，拖动的div回到原位
});

现在课程表中的课程可以拖动了，但是拖动到另外一个td中，原有的课程并没有消失。如果在课程表中的元素被拖动，且被其他容器（td）接收后，原有的元素不需要拷贝，直接移动到容器中。修改代码：

//设置课程表单元格接收拖动元素
$('.right td.drop').droppable({
	//拖动元素置容器（表格中运用了样式drop的td）中 
	onDrop:function(e,source){
		//如果拖动的元素是课程表中的
		if ($(source).hasClass('assigned')){  
            $(this).append(source);  
        } else {//如果是从左边课程中拖动			
			//拷贝拖动的元素，避免课程信息丢失，同时设置以放置课程容器的样式
			var c = $(source).clone().addClass('assigned');
			//来先清空存在课程，再将元素放入td中
			$(this).empty().append(c); 
			c.draggable({
				revert:true//若未被容器接收，放开时，拖动的div回到原位
			});
		}
	} 
});	

测试运行，一切OK。但是效果比较单调，我们希望元素被拖动到容器上面是有提示效果。

$('.right td.drop').droppable({
	//当元素被拖入容器时触发
	onDragEnter:function(){  
        $(this).addClass('over'); //添加样式
    },  
	//当元素被拖离容器时触发
    onDragLeave:function(){  
        $(this).removeClass('over');  
    }, 
	//拖动元素置容器（表格中运用了样式drop的td）中 
	onDrop:function(e,source){
		$(this).removeClass('over');  
		//如果拖动的元素是课程表中的
		if ($(source).hasClass('assigned')){  
            $(this).append(source);  
        } else {//如果是从左边课程中拖动			
			//拷贝拖动的元素，避免课程信息丢失，同时设置以放置课程容器的样式
			var c = $(source).clone().addClass('assigned');
			//来先清空存在课程，再将元素放入td中
			$(this).empty().append(c); 
			c.draggable({
				revert:true//若未被容器接收，放开时，拖动的div回到原位
			});
		}
	} 
});	

设置over样式：

.right td.over{
	background:#FBEC88;
}

附：schoolTimetable.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>课程表</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
.item{
	text-align:center;
	border:1px solid #499B33;
	background:#fafafa;
	width:100px;
}
.left{
	width:120px;
	float:left;
}
.left table{
	background:#E0ECFF;
}
.left td{
	background:#eee;
}
.right{
	float:right;
	width:570px;
}
.right table{
	background:#E0ECFF;
	width:100%;
}
.right td{
	text-align:center;
	padding:2px;
	background:#E0ECFF;
}
.right td.drop{
	background:#fafafa;
	width:100px;
}
.assigned{
	border:1px solid #BC2A4D;
}
.right td.over{
	background:#FBEC88;
}
</style>
<script type="text/javascript">
$(function(){
	//设置class为item的div拖放效果
	$('.left .item').draggable({  
    revert:true,//放开时，拖动的div回到原位
    proxy:'clone' //拖动效果为复制
	});  
	//设置课程表单元格接收拖动元素
	$('.right td.drop').droppable({
		//当元素被拖入容器时触发
		onDragEnter:function(){  
        	$(this).addClass('over'); //添加样式
    	},  
		//当元素被拖离容器时触发
    	onDragLeave:function(){  
        	$(this).removeClass('over');  
    	}, 
		//拖动元素置容器（表格中运用了样式drop的td）中 
		onDrop:function(e,source){
			$(this).removeClass('over');  
			//如果拖动的元素是课程表中的
			if ($(source).hasClass('assigned')){  
            	$(this).append(source);  
        	} else {//如果是从左边课程中拖动			
				//拷贝拖动的元素，避免课程信息丢失，同时设置以放置课程容器的样式
				var c = $(source).clone().addClass('assigned');
				//来先清空存在课程，再将元素放入td中
				$(this).empty().append(c); 
				c.draggable({
					revert:true//若未被容器接收，放开时，拖动的div回到原位
				});
			}
		} 
	});	
});
</script>
</head>

<body>
<div class="left">  
   <table>  
       <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>  
       <tr>  
          <td class="blank"></td>  
          <td class="title">星期一</td>  
          <td class="title">星期二</td>  
          <td class="title">星期三</td>  
          <td class="title">星期四</td>  
          <td class="title">星期五</td>  
        </tr>  
        <tr>  
          <td class="time">08:05—09:45</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—11:40</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:25—16:05</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">16:15—17:55</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">19:30—21:10</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>