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>