效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jq/jquery.min.js"></script>
<script src="../jq/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="../themes/default/easyui.css" />
<link rel="stylesheet" href="../themes/icon.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script src="../jq/easyui-lang-zh_CN.js"></script>
<style>
.left {
width: 120px;
float: left;
}
.left table {
background: #E0ECFF;
}
.left td {
background: #eee;
}
.right {
float: left;
width: 570px;
}
.right table {
background: #E0ECFF;
width: 100%;
}
.right td {
background: #fafafa;
color: #444;
text-align: center;
padding: 2px;
}
.right td {
background: #E0ECFF;
}
.right td.drop {
background: #fafafa;
width: 100px;
}
.right td.over {
background: #FBEC88;
}
.item {
text-align: center;
border: 1px solid #499B33;
background: #fafafa;
color: #444;
width: 100px;
}
.assigned {
border: 1px solid #BC2A4D;
}
.trash {
background-color: red;
}
</style>
</head>
<body>
<div class="left">
<table>
<tr>
<td>
<div class="item">English</div>
</td>
</tr>
<tr>
<td>
<div class="item">Science</div>
</td>
</tr>
<!-- other subjects -->
</table>
</div>
<div class="right">
<table>
<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>
<!-- other cells -->
</table>
</div>
<script>
$('.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>
</body>
</html>
