jquery-easyui中实现课程表拖放效果

Question

利用jQuery EasyUI可以很容易就实现学校课程表的拖放设计，看一下效果图：

www.javaeye.com__dnd3_1.png (6.23 KB, 下载次数: 12)

下载附件

2011-03-03 14:41 上传

如何将左边的课程拖到右边的单元格上，利用draggable,droppable二个插件就可以做到。

看一下课程表的HTML结构：

1. <div class="left">
   
2.     <table>
   
3.         <tr>
   
4.             <td><div class="item">English</div></td>
   
5.         </tr>
   
6.         <tr>
   
7.             <td><div class="item">Science</div></td>
   
8.         </tr>
   
9.         <!-- other subjects -->
   
10.     </table>
    
11. </div>

复制代码再看一下时间表的HTML结构：

1. <div class="right">
   
2.     <table>
   
3.         <tr>
   
4.             <td class="blank"></td>
   
5.             <td class="title">Monday</td>
   
6.             <td class="title">Tuesday</td>
   
7.             <td class="title">Wednesday</td>
   
8.             <td class="title">Thursday</td>
   
9.             <td class="title">Friday</td>
   
10.         </tr>
    
11.         <tr>
    
12.             <td class="time">08:00</td>
    
13.             <td class="drop"></td>
    
14.             <td class="drop"></td>
    
15.             <td class="drop"></td>
    
16.             <td class="drop"></td>
    
17.             <td class="drop"></td>
    
18.         </tr>
    
19.         <!-- other cells -->
    
20.     </table>
    
21. 
    
22. 现在可以看拖放的代码：
    
23. 
    
24. [code]$('.left .item').draggable({
    
25.     revert:true,
    
26.     proxy:'clone'
    
27. });

复制代码

1. $('.right td.drop').droppable({
   
2.     onDragEnter:function(){
   
3.         $(this).addClass('over');
   
4.     },
   
5.     onDragLeave:function(){
   
6.         $(this).removeClass('over');
   
7.     },
   
8.     onDrop:function(e,source){
   
9.         $(this).removeClass('over');
   
10.         if ($(source).hasClass('assigned')){
    
11.             $(this).append(source);
    
12.         } else {
    
13.             var c = $(source).clone().addClass('assigned');
    
14.             $(this).empty().append(c);
    
15.             c.draggable({
    
16.                 revert:true
    
17.             });
    
18.         }
    
19.     }
    
20. });

复制代码原文及下载地址：http://jquery-easyui.wikidot.com/tutorial:dnd3


</div>[/code]