jQuery EasyUI 拖放 – 創(chuàng)建學(xué)校課程表

jQuery EasyUI 拖放 - 創(chuàng)建學(xué)校課程表

本節(jié)將使用jQuery EasyUI創(chuàng)建一個(gè)學(xué)校課程表實(shí)例。在這個(gè)實(shí)例中，我們將創(chuàng)建兩個(gè)表格：在左側(cè)顯示學(xué)校科目，在右側(cè)顯示時(shí)間表。您可以拖動(dòng)學(xué)校科目并放置到時(shí)間表單元格上。學(xué)校科目是一個(gè)<div class="item">元素，時(shí)間表單元格是一個(gè)<td class="drop">元素。

顯示學(xué)?？颇?/h4>

	<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>

顯示時(shí)間表

	<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>
			<!-- other cells -->
		</table>
	</div>

拖動(dòng)在左側(cè)的學(xué)?？颇?/h4>

	$('.left .item').draggable({
		revert:true,
		proxy:'clone'
	});

放置學(xué)校科目在時(shí)間表單元格上

	$('.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
				});
			}
		}
	});

正如您所看到的上面的代碼，當(dāng)用戶(hù)拖動(dòng)在左側(cè)的學(xué)?？颇坎⒎胖玫綍r(shí)間表單元格中時(shí)，onDrop回調(diào)函數(shù)將被調(diào)用。我們克隆從左側(cè)拖動(dòng)的源元素并把它附加到時(shí)間表單元格上。當(dāng)把學(xué)?？颇繌臅r(shí)間表的某個(gè)單元格拖動(dòng)到其他單元格，只需簡(jiǎn)單地移動(dòng)它即可。

下載 jQuery EasyUI 實(shí)例

jeasyui-dd-timetable.zip