jEasyUI 創(chuàng)建學(xué)校課程表

本教程將向您展示如何使用 jQuery EasyUI 創(chuàng)建一個學(xué)校課程表。我們將創(chuàng)建兩個表格：在左側(cè)顯示學(xué)校科目，在右側(cè)顯示時間表。您可以拖動學(xué)?？颇坎⒎胖玫綍r間表單元格上。學(xué)?？颇渴且粋€ <div class="item"> 元素，時間表單元格是一個 <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>

顯示時間表

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

拖動在左側(cè)的學(xué)校科目

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

放置學(xué)?？颇吭跁r間表單元格上

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

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

上一篇：jEasyUI 創(chuàng)建拖放的購物車下一篇：jEasyUI 創(chuàng)建簡單的菜單