4 课程表制作

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

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

4.1 显示课程

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

  
   
  
       
  
          
英语
  
       
  
       
  
          
数学
  
       
  
       
  
          
中文
  
       
 
   
  

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

4.2  显示课程表

  
   
  
       
  
          
  
          
星期一
  
          
星期二
  
          
星期三
  
          
星期四
  
          
星期五
  
        
  
        
  
          
08:05—09:45
  
          
  
          
  
          
  
          
  
          
  
       
  
       
  
          
10:00—11:40
  
          
  
          
  
          
  
          
  
          
  
       
       
  
          
14:25—16:05
  
          
  
          
  
          
  
          
  
          
  
       
 
       
  
          
16:15—17:55
  
          
  
          
  
          
  
          
  
          
  
       
 
       
  
          
19:30—21:10
  
          
  
          
  
          
  
          
  
          
  
       
         
   
  

设置课程表外观：

.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代码：

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

  
   
  
       
  
          
英语
  
       
  
       
  
          
数学
  
       
  
       
  
          
中文
  
       
 
   
  

  
   
  
       
  
          
  
          
星期一
  
          
星期二
  
          
星期三
  
          
星期四
  
          
星期五
  
        
  
        
  
          
08:05—09:45
  
          
  
          
  
          
  
          
  
          
  
       
  
       
  
          
10:00—11:40
  
          
  
          
  
          
  
          
  
          
  
       
       
  
          
14:25—16:05
  
          
  
          
  
          
  
          
  
          
  
       
 
       
  
          
16:15—17:55
  
          
  
          
  
          
  
          
  
          
  
       
 
       
  
          
19:30—21:10