jQuery easyUI动态的课表

最新推荐文章于 2025-06-23 14:35:47 发布
原创最新推荐文章于 2025-06-23 14:35:47 发布 · 1.8k 阅读
3 ·
CC 4.0 BY-SA版权
原代码专栏收录该内容
6 篇文章
订阅专栏
本文介绍了一种使用jQuery EasyUI实现课程表拖拽编辑的方法。通过draggable和droppable组件，用户可以轻松地将课程从左侧拖放到右侧的时间表中，支持课程的复制与移除操作。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
draggable拖拽和droppable放置

建议用IE或火狐浏览器，亲测！
</pre><p><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
	<style type="text/css">
		.left{
			width:120px;
			float:left;
		}
		.left table{
			background:#E0ECFF;
		}
		.left td{
			background:#eee;
		}
		.right{
			float:right;
			width:600px;
		}
		.right table{
			background:#E0ECFF;
			width:100%;
		}
		.right td{
			background:#fafafa;
			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;
			width:100px;
		}
		.assigned{
			border:1px solid #BC2A4D;
		}
		div{
			/*直角变成圆角*/
			border-radius:5px;
		}
		body{
			/*实现页面放大效果(原页面的多少倍)*/
			transform:scale(1.5);
		}
		
	</style>
	<!--   总结：
		draggable主要功能是【拖拽】
			在拖动目标上触发事件 (源元素):
			ondragstart - 用户开始拖动元素时触发
			ondrag - 元素正在拖动时触发
			ondragend - 用户完成元素拖动后触发

		droppable主要功能是【放置】
			释放目标时触发的事件:
			ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
			ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
			ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
			ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
	-->
	<script>
		$(function(){

			/**左  -->  右(复制)【拖动策略】*/
			$('.left .item').draggable({
				revert:true,
				proxy:'clone'
			});

			remove();

			$('.right td.drop').droppable({
				accept : '.item',//只允许操作class为item的标签
				//ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
				onDragEnter:function(){
					$(this).addClass('over');
				},
				//ondragover - 当被拖动的对象在另一对象容器范围内拖动时触发此事件
				onDragLeave:function(){
					$(this).removeClass('over');
				},
				//ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
				onDrop:function(e,source){
					//this指的是td
					//source指的是正在拖动的div
					$(this).removeClass('over');
					if ($(source).hasClass('assigned')){
						//alert($(this).find("div").html());//jQuery 遍历 - find() 方法
						
						/**替换************************************************/
						$(this).empty().append(source);//替换
						
						/**添加************************************************/
//						if($(this).find("div").html() != $(source).html()){
//							$(this).append(source);//添加
//						}else{
//							return null;
//						}

					} else {
						var c = $(source).clone().addClass('assigned');
						//$(this).empty().append(c);

						/**替换************************************************/
						$(this).empty().append(c);//替换
						
						/**添加************************************************/
//						if($(this).find("div").html() != $(c).html()){
//							$(this).append(c);//添加
//						}else{
//							return null;
//						}

						c.draggable({
							revert:true
						});
					}
				}
			});
		});

		function remove(){
			/**右  -->  左(移除)*/
			$('.right div').draggable({
				revert:true,
			});
			$('.left').droppable({
				accept : '.assigned',
				onDragEnter : function(e, source) {
					$(source).addClass('trash');
				},
				onDragLeave : function(e, source) {
					$(source).removeClass('trash');
				},
				onDrop : function(e, source) {
					$(source).remove();
				}
			});
		}
	</script>
</head>
<body>
<center><h1>Course</h1></center>
<!-- jQuery easyUI拖动效果 -->
<hr>
<center>
	<div style="width:750px;">
		<div class="left">
			<table>
				<tr>
					<td><div class="item">English</div></td>
				</tr>
				<tr>
					<td><div class="item">Science</div></td>
				</tr>
				<tr>
					<td><div class="item">Music</div></td>
				</tr>
				<tr>
					<td><div class="item">History</div></td>
				</tr>
				<tr>
					<td><div class="item">Computer</div></td>
				</tr>
				<tr>
					<td><div class="item">Mathematics</div></td>
				</tr>
				<tr>
					<td><div class="item">Arts</div></td>
				</tr>
				<tr>
					<td><div class="item">Ethics</div></td>
				</tr>
				<tr>
					<td><div class="item">Biology</div></td>
				</tr>
				<tr>
					<td><div class="item">Geography</div></td>
				</tr>
			</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>
				<tr>
					<td class="time">12: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">13:00</td>
					<td class="lunch" colspan="5">Lunch</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>
				<tr>
					<td class="time">15: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">16: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>
	</div>
</center>
</body>
</html>