码迷,mamicode.com
首页 > 其他好文 > 详细

easyUI拖动课程进课程表

时间:2018-06-25 15:17:21      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:课程   lse   read   javascrip   进入   function   英语   min   assigned   

<!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拖动课程进课程表

标签:课程   lse   read   javascrip   进入   function   英语   min   assigned   

原文地址:https://www.cnblogs.com/LindaBlog/p/9223850.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!