这个教程将显示如何通过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>